Angular2 - 在另一个Observable

时间:2016-11-15 15:02:06

标签: angular typescript ionic2 rxjs observable

问题

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

当前错误

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

预期结果

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

以前的代码

(适用于getUserHeaders()返回的带编码的标题(因此不是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()在这里没有用,所以我创建了两个返回promises的方法 - 现在我想在getUserHeaders()的promise中使用getParticipants()的值仍然会从getParticipants()

返回getUserHeaders()的承诺/可观察结果

2 个答案:

答案 0 :(得分:4)

将您的getUserHeaders()更改为:

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

然后在getParticipants()内构建标题对象。这样您就可以保留flatMap

答案 1 :(得分:0)

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

在服务中(数据来源):

private theBoolean: BehaviorSubject<boolean>;

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

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

要发布像布局的新值,请执行

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

在组件(数据的用户)中:

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

归功于Reddit

上的“pashozator”