Angular 4, convert http response observable to object observable

问题:

I'm new to the concepts of observables and need some help with a conversion.
I have a service which returns an Observable<Response> from a Http request, but I need to convert it do an Observable<PriceTag> to use it on a DataSource inside the connect method.
Is there anyway to do this?

This is the method from my service:

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

And here is the DataSource class where I need to return it as an Observable<PriceTag>:

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() {}  } 

Here's an example from the response from my request:

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

回答1:

As of angular 4.3 this can be done automatically.

Example:

export class SomeService {     constructor(private http: HttpClient) {}  // <--- NOTE: HttpClient instead of Http      getSome(): Observable<MyAwesomeObject> {         return this.http.get<MyAwesomeObject>.get('myUrl');     } } 

So in your case that would be:

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

Again, use the HttpClient instead of Http

回答2:

I guess your HTTP Response is a JSON containing a PriceTag? The issue is that you want to create a PriceTag object. You can just convert the json to a PriceTag by type casting, but then it won't be a real PriceTag object.

The way we have resolved this is:

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

And then a serializable class:

export class PriceTag extends Serializable {} 

Then, your GetPriceTags function needs to be changed to:

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, convert http response observable to object observable