Angular 4，将 http 响应 observable 转换为 object observable答案

【问题标题】：Angular 4, convert http response observable to object observableAngular 4，将 http 响应 observable 转换为 object observable
【发布时间】：2018-01-31 07:45:29
【问题描述】：

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

}

这里是 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"
        }
    ]
}

【问题讨论】：

其中一个答案对您有帮助吗？

标签： angular typescript rxjs observable

【解决方案1】：

从 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

【讨论】：

哦哦，我不知道它可以做到这一点......整洁
这和getSome(): Observable<MyAwesomeObject> { return this.http.get('myUrl').map((response) => <MyAwesomeObject>response.json()); }有区别
对我来说，这实际上并没有创建 PriceTag 对象。数据仍然是 Object 类型。
嗨，我有一个小问题。有些东西我不明白，在这个解决方案中，我确实可以获得 MyAwsomeObject 实例的所有属性，但如果这个类也有一些公共方法，我无法访问它 - 所以它看起来像 MyAwsomeObject 的 json 表示 - 不是它本身的实例。我做错了吗？
好的.. 我找到了我的评论的答案。 stackoverflow.com/questions/48102824/…

【解决方案2】：

我猜你的 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()));

}

【讨论】：

【解决方案3】：

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

【讨论】：