Angular 4,将http响应observable转换为object observable

时间:2017-08-22 21:48:40

标签: angular typescript rxjs observable

我对可观察者的概念不熟悉,需要一些转换帮助 我有一个服务从Http请求返回Observable<Response>,但是我需要转换它Observable<PriceTag>才能在连接方法的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});

}

这是DataSource类,我需要将其作为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() {}

}

以下是我的请求回复中的一个示例:

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

3 个答案:

答案 0 :(得分:26)

从角度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

答案 1 :(得分: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()));

}

答案 2 :(得分:0)

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