web-dev-qa-db-ja.com

Angular 4、監視可能なHTTP応答を監視可能なオブジェクトに変換する

私はオブザーバブルの概念に慣れていないので、変換の手助けが必要です。
Httpリクエストから_Observable<Response>_を返すサービスがありますが、connectメソッド内のDataSourceで使用するには、_Observable<PriceTag>_に変換する必要があります。
これを実行する方法はありますか？

これは私のサービスからのメソッドです：

_getPriceTags(): Observable<Response> {

    // Set the request headers
    const headers = new Headers({ 'Content-Type': 'application/json' });

    // Returns the request observable
    return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});

}
_

そして、ここに_Observable<PriceTag>_として返す必要があるDataSourceクラスがあります：

_export class PriceTagDataSource extends DataSource<PriceTag> {

    constructor (private priceTagService: PriceTagService) {
        super();
    }

    connect(): Observable<PriceTag> {

        // Here I retrieve the Observable<Response> from my service
        const respObs = this.priceTagService.getPriceTags();

        // Now I need to return a Observable<PriceTag> 

    }

    disconnect() {}

}
_

これが私のリクエストからのレスポンスの例です：

_{
    // This object is used to check if the query on the server was sucessful
    "query": {
        "sucessful": true
    },

    // These are my PriceTags 
    "tags": [
        {
            "id": "1",
            "name": "MAIN"
        },
        {
            "id": "2",
            "name": "CARD"
        }
    ]
}
_
angulartypescriptrxjsobservable
9
Rafael

angular 4.3以降、これは自動的に実行できます。

例：

_export class SomeService {
    constructor(private http: HttpClient) {}  // <--- NOTE: HttpClient instead of Http

    getSome(): Observable<MyAwesomeObject> {
        return this.http.get<MyAwesomeObject>('myUrl');
    }
}
_

あなたの場合、それは次のようになります：

return this.http.post<PriceTag>(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});

再び、HttpClientの代わりにHttpを使用します

29
Robin Dijkhof

あなたのHTTPレスポンスはPriceTagを含むJSONだと思いますか？問題は、PriceTagオブジェクトを作成することです。型キャストによってjsonをPriceTagに変換できますが、実際のP​​riceTagオブジェクトにはなりません。

これを解決した方法は次のとおりです。

export class Serializable {
  constructor(json?: any) {
    if (json) {
      Object.assign(this, json);
    }
  }
}

そして、シリアライズ可能なクラス：

export class PriceTag extends Serializable {}

次に、GetPriceTags関数を次のように変更する必要があります。

getPriceTags(): Observable<PriceTag> {

    // Set the request headers
    const headers = new Headers({ 'Content-Type': 'application/json' });

    // Returns the request observable
    return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers})
    .map(res => new PriceTag(res.json()));

}
4
Boland

の中に Angular 4+、自動的に実行できます。 getPriceTagsメソッドを変更できます：

export class PriceTagService {
    constructor(private http: HttpClient) {}

    getPriceTags<T>(): Observable<T> {

        // Set the request headers
        const headers = new Headers({ 'Content-Type': 'application/json' });

        // Returns the request observable
        return this.http.post<T>(`${Constants.WEBSERVICE_ADDRESS}/priceTag`, null, {headers: headers});

    }
}

DataSourceクラスは次のようになります：

export class PriceTagDataSource extends DataSource<PriceTag> {
    constructor (private priceTagService: PriceTagService) {
        super();
    }

    connect(): Observable<PriceTag> {
        // Here you can retrieve the Observable<PriceTag> from service and return directly
        return this.priceTagService.getPriceTags<PriceTag>();
    }

    disconnect() {}
}
0
SLDev