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

【问题标题】：Angular2 - Use value of Observable returning method in another ObservableAngular2 - 在另一个 Observable 中使用 Observable 返回方法的值
【发布时间】：2017-03-29 12:40:13
【问题描述】：

问题

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

当前错误

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

预期结果

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

以前的代码

（与getUserHeaders() 返回的硬编码标头一起使用（因此不是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（Promise 代替 Observable）

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

（注意：Observable.fromPromise() 在这里不起作用，所以我创建了两种返回承诺的方法——现在我想在getParticipants() 的承诺中使用getUserHeaders() 的值，并且仍然返回承诺/可观察getParticipants() 和 getUserHeaders() 没有任何内容

【问题讨论】：

这到底是什么问题，是打字问题吗？无论如何，Array<Participant> 在这里是错误的，因为response.json() 是any。
response.json() 被确认为Array<Participant> 注意： 方法getAllParticipants 以前运行良好，我只是想合并Headers来自getUserHeaders() 方法
从 Typescript 的角度来看，它不是 Array<Participant>。而且你没有解释问题是什么。
@estus 编辑了这个问题，我想我说得更清楚了，如果仍然不清楚，请发表评论:)
目前尚不清楚错误消息是什么以及为什么会发生。解决方案本身看起来还可以，MCVE 是问题所缺少的。

标签： angular typescript ionic2 rxjs observable

【解决方案1】：

将您的 getUserHeaders() 更改为：

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

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

【讨论】：

我应该在getParticipants 的哪个位置构建我的标题？

【解决方案2】：

就我个人而言，我的问题的解决方案是使用BehaviorSubject：

服务中（数据来源）：

private theBoolean: BehaviorSubject<boolean>;

constructor() {
    this.theBoolean = new BehaviorSubject<boolean>(false);
}

public getTheBoolean(): Observable<boolean> {
    return this.theBoolean.asObservable();
}

要发出 theBoolean 的新值，请做类似的事情

public setTheBoolean(newValue: boolean): void {
    this.theBoolean.next(newValue);
}

在组件中（数据的用户）：

this.theService.getTheBoolean().subscribe(value => console.log(value));

感谢Reddit上的“pashozator”

【讨论】：