角4、観測可能なオブジェクトへの観測可能なHTTP応答を変換する

Question

私はobservablesの概念を初めて使いました。
私はHTTPリクエストからObservable<Response>を返すサービスを持っていますが、Observable<PriceTag>を変換してconnectメソッド内のDataSourceで使用する必要があります。
これはどうしてですか？

これは私のサービスからの方法である：

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" 
     } 
    ] 
} 

Answer 1

角度4.3では、これは自動的に行うことができます。

例：

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

ここでも、答えの一つがあなたを助けたの代わりにHttp

Answer 2

ちょうど変更Observable<Response>〜Observable<PriceTag>

これらのタイプキャスティングは、正しいタイプを送信しているか期待しているかを確認するためのタイプコピーです。

EDIT

import { PriceTag } from 'your-path-to-model'; 

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}) 
    .map((res: Response) => { 
     return new PriceTag(res.json()); 
    }); 
} 

Answer 3

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

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

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())); 

}