Angular2 - 在另一个 Observable 中使用 Observable 返回方法的值 [英] Angular2 - Use value of Observable returning method in another Observable

问题描述

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

I dont know how to use the value of the currently returned Observable of getUserHeaders() in my http.get.

输入'Observable'不可分配到类型 'Observable'

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

Being able to use the value of my Observable returning method getUserHeaders() as a headers attribute within the http call. While only returning the http call's Observable.

(与 getUserHeaders() 返回的硬编码标头一起使用(因此不是 Observable 或 Promise).

(which worked with harcoded Headers returned by getUserHeaders() (so not an Observable or Promise).

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

当前代码

通过 从 http 数据链接 RxJS ObservablesAngular2 with TypeScript 的回答我来到了 flatMap 方法.(注意此代码当前抛出当前错误")

Current code

going by Chaining RxJS Observables from http data in Angular2 with TypeScript 's answer I came to the flatMap method. (note this code currently throws the 'current error')

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(Promise 而不是 Observable)

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

(注意:Observable.fromPromise() 在这里不起作用，所以我创建了两个返回承诺的方法——现在我想使用 getUserHeaders() 的值code> 在 getParticipants() 的 promise 中，仍然返回 getParticipants() 的 promise/observable 而 getUserHeaders()

(note: Observable.fromPromise() didn't work here so I have created the two methods returning promises -- now I want to use the value of getUserHeaders() inside the promise of getParticipants() and still return the promise/observable of getParticipants() and nothing from getUserHeaders()

推荐答案

将您的 getUserHeaders() 更改为:

getUserHeaders(): Observable<any> { return Observable.of(NativeStorage.getItem("user"); }

然后在 getParticipants() 中构建您的标题对象.这样你就可以保持 flatMap

Then construct your headers object within getParticipants(). This way you can keep flatMap

这篇关于Angular2 - 在另一个 Observable 中使用 Observable 返回方法的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！