Angular2 RxJSストリーム親コレクションの各子にHTTPを呼び出す

Question

私は、オブジェクト（ユーザ）の集合を得るためにhttpを呼び出すコンポーネントを持っています。それらのユーザーのそれぞれについて、別のHTTPコールをもう一度行って、ユーザーの追加の詳細を取得する必要があります。 RxJSとobservablesでこれをどうやって行うのですか？私たちがgithubユーザーのリストを取得し、フォロワー数を取得するために各フォロワーを取得しようとするこのplunkに示された動作。

サブスクリプションコードは、user-grid.component.tsにあります。

http://plnkr.co/edit/Xuu5jqeKVmbY5qwHLJJt

ngOnInit(){ 
    this.users$ = this._githubUserService.getUsers() 
     .map((res) => res.json()) 
     .flatMap((users) => Observable.from(users)) 
     .flatMap((e) => { 
      return this._githubUserService.getFollowers(e.followers_url) 
      .map((followers)=> followers.json()) 
     }, (e, res) => e.followers = res)  
} 

Answer 1

私は非同期パイプに深く慣れていませんが、あなたの問題は*ngForがリストの再水和としてObservableの新しい値をそれぞれ扱うということです。 flatMapに渡している2番目の関数は、フォロワー呼び出しから返された配列を返しています（新しい要求によって解決されるたびにリストが再構築されるため、ちらつきの原因となります）。

toArray演算子を最後に追加すると、すべての値が返されるまで待つことになります。

さらに、followersを配列に変換するので、ネストされたh4で非同期パイプを使用する必要はありません。

はこちらをご覧ください：

http://plnkr.co/edit/X2OjHGiPpmml2cmLD1tm?p=preview

興味深いビット：

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 
import 'rxjs/add/operator/toArray'; 


ngOnInit(){ 
    this.users$ = this._githubUserService.getUsers() 
     .map((res) => res.json()) 
     .flatMap(users => users) 
     .flatMap(
      (e) => this._githubUserService.getFollowers(e.followers_url), 
      (e, res) => Object.assign(e, {followers: res.json()})) 
     .toArray(); 
} 

// in user-grid.component.html 
<md-list> 
    <h1 md-header>GitHub Users</h1> 
    <md-list-item *ngFor="let user of users$ | async"> 
    <a href="https://github.com/{{user.login}}" target="_new"> 
     <img md-list-avatar [src]="user.avatar_url"> 
    </a> 
    <h4>{{user.login}} (followers: {{user.followers.length}})</h4> 
    </md-list-item> 
</md-list> 

Answer 2

私は（それは私に403を返します - 禁断の）あなたのplnkrを開くことができないんだけど、私はあなたがこのような構造を構築したい場合だと思います：

[{ userId: 1, followersQtt : 25 }, { userId: 2, followersQtt : 18 }, ... ]

あなたはこのような何かを行うことができます：

//get the users' json as an Array 
let usersJsonArray = this._githubUserService.getUsers().map((res) => res.json()); 

this.users$ = Observable.from(usersJsonArray) //we have to convert the Array to an Observable    
       .flatMap((user) => { 

        //get the followers' json 
        let followersJsonArray = this._githubUserService.getFollowers(user.followers_url).map((res) => res.json()); 

        return Observable.from(followersJsonArray) //again, we have to convert the Array to an Observable        
           .map(() => 1) //map each follower to the number 1 
           .reduce((x,y) => x+y) //sums up all the followers (that were mapped to the number '1') 
           .map((followersQtt) => { userId : user.id, followersQtt : followersQtt }) //return an object with the informations (I don't know if the user's id is really in the property user.id)  

       });