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

问题描述

问题

我不知道如何使用当前返回的的observable值getUserHeaders（）在我的 http.get 中。

当前错误

类型'Observable< void>'不能分配给类型'Observable< Participant []>'

预期结果

能干使用我的Observable返回方法 getUserHeaders（）的值作为中的标题属性http 致电。只返回 http 调用的Observable。

上一个代码

（使用由 getUserHeaders（）返回的带编码的标题（所以不是 Observable 或<$ c $ 。C>无极）

  getAllParticipants（）：可观察<阵列<参与者GT;> {
返回this.http.get（'someUrl'，
 {headers：this.getUserHeaders（）}）
 .map（response => {
 return response.json（） ; 
}）; 
}）; 
} 
  

当前代码

链接RxJS观测量从Angular2以http数据TypeScript 的回答我来到 flatMap 方法。 （注意此代码当前会抛出'当前错误'）

  getUserHeaders（）：Observable< Headers> ; {
 let headers：Headers = new Headers（）; 
 
返回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（错误）; 
 headers.append（'API_KEY'，'TEST'）; 
 headers.append（'DEVICE_ID'，'TEST'）; 
返回标题; 
} 
）; 
} 
 
 / **从数据库中检索所有参与者* / 
 getAllParticipants（）：Observable< Array< Participant>> {
 
返回this.getUserHeaders（）。flatMap（data => {
返回this.http.get（'someUrl'，{headers：data}）。map（response => ; {
返回response.json（）; 
}）; 
}）; 
} 
  

plunkr（承诺而不是Observable）

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

（注意： Observable.fromPromise（）在这里没有用，所以我创建了两个返回promises的方法 - 现在我想在 getParticipants（）的承诺中使用 getUserHeaders（）的值仍然返回 getParticipants（）的promise / observable，并且 getUserHeaders（）

解决方案

将 getUserHeaders（）更改为：

'pre> getUserHeaders（）：可观察<任何> {返回Observable.of（NativeStorage.getItem（ 用​​户）;}


然后在 getParticipants（）中构建头文件对象。这样你就可以保持 flatMap

The problem

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

Current error

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

Expected result

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.

Previous code

(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();
        });
    });
   }

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 instead of Observable)

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

(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()

解决方案

Change your getUserHeaders() to look like:

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

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

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