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

标签 angular typescript ionic2 rxjs observable

问题

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

当前错误

Type 'Observable<void>' is not assignable to type 'Observable<Participant[]>'

预期结果

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

上一个代码

(与 getUserHeaders() 返回的硬编码 header 一起使用(因此不是 ObservablePromise )。

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

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

(注意:Observable.fromPromise() 在这里不起作用,所以我创建了两个返回 promise 的方法——现在我想在 getUserHeaders() 的 promise 中使用 getParticipants() 的值,并且仍然返回 promise /可观察getParticipants()getUserHeaders() 中的任何内容

最佳答案

将您的 getUserHeaders() 更改为:

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

然后在 getParticipants() 中构造您的 header 对象。这样你就可以保持 flatMap

关于Angular2 - 在另一个 Observable 中使用 Observable 返回方法的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40613099/

相关文章:

angular - 如何获取导致 Angular 5 错误的组件名称

javascript - Angular 5 : Can't Resolve All Parameters for e: (? )

node.js - Express TypeScript 路由属性

android - 迁移 firebase 帐户

javascript - 向上/向下滑动不适用于 Ionic 2

javascript - 如何从外部 javascript 函数调用 typescript 函数

angular - 在 Angular2 应用程序中使用 Docker 环境变量

angular - S3 静态托管 - 没有 index.html 的路径

html - ( Angular 5)*ngIf 不适用于选择/选项

javascript - 如何使 testcafe 与绝对进口一起工作?