私はオブザーバブルの概念に慣れていないので、変換の手助けが必要です。
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"
}
]
}
_
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
を使用します
あなたの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()));
}
の中に 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() {}
}