Angular2 – 在另一个Observable中使用Observable返回方法的值

前端之家收集整理的这篇文章主要介绍了Angular2 – 在另一个Observable中使用Observable返回方法的值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题

我不知道如何在我的http.get中使用当前返回的getUserHeaders()的Observable值.

当前错误

输入’Observable< void>‘不能分配给’Observable< Participant []>‘

预期结果

能够使用我的Observable返回方法getUserHeaders()的值作为http调用中的headers属性.虽然只返回http调用的Observable.

以前的代码

(使用getUserHeaders()返回的harcoded Headers(所以不是Observable或Promise).

getAllParticipants(): Observable<Array<Participant>> {
    return this.http.get('someUrl',{headers: this.getUserHeaders()})
           .map(response => {
               return response.json();
        });
    });
   }

目前的代码

按照Chaining RxJS Observables from http data in Angular2 with TypeScript的回答我来到flatMap方法. (注意此代码当前会抛出’当前错误’)

getUserHeaders(): Observable<Headers> {
        let headers: Headers = new Headers();

        return NativeStorage.getItem("user").map(
            data => {
                headers.append('API_KEY',data.json().apiKey);
                headers.append('DEVICE_ID',data.json().deviceId);
                return headers
            }).catch( error => {
                console.log("error");
                headers.append('API_KEY','TEST');
                headers.append('DEVICE_ID','TEST');
                return headers;
            }
        );
    }

/** retrieves ALL the participants from the database */
    getAllParticipants(): Observable<Array<Participant>> {

         return this.getUserHeaders().flatMap( data => {
            return this.http.get('someUrl',{headers: data}).map(response => {
                return response.json();
            });
        });
   }

plunkr(承诺而不是Observable)

http://plnkr.co/edit/A0tEB9EUodWQS6AnqrtH?p=info

(注意:Observable.fromPromise()在这里没有用,所以我创建了两个返回promises的方法 – 现在我想在getParticipants()的promise中使用getUserHeaders()的值,并且仍然返回promise / observable getParticipants()并没有getUserHeaders()

将您的getUserHeaders()更改为:
getUserHeaders(): Observable<any> { return Observable.of(NativeStorage.getItem("user"); }

然后在getParticipants()中构造头对象.这样你就可以保持flatMap

原文链接:https://www.f2er.com/angularjs/143443.html

猜你在找的Angularjs相关文章