角2ルート複数のネストしたオブザーバブルを解決する

Question

私はサブスクライブ時にネストされたオブザーバブルを持つオブザーバブルを持っています。

最終的な出力を得るために、forループ内で複数回apiが呼び出されるという問題が原因です。

もう少し具体的には、私はまずウィジェットのAPIを呼び出し、次にウィジェットオブジェクトに追加するfooの配列を返すようにAPIを呼び出します。最後に、foo配列をループし、barを取得するために使用されるfoo.idを取得します。次にbarがfoo [x]要素に追加されます。

ルータのウィジェットを解決すると、ウィジェットの属性はありますが、foo配列が観測可能として返されます。ルートが解決される前にfooを購読してから、fooをループして各foo要素のバーに登録します。

Answer 1

私はflatMapとforkJoinを使用して、複数のapi呼び出しが1つのサブスクリプションで解決できるようにしました。答えは、投稿に基づいていたCombining multiple Http streams with Observables in Angular 2

getWidget(id) { 
    return Observable.forkJoin(
    this.service.getWidget(id), 
    this.getFoo(id) 
    ).map(res => { 
     res[0].foo = res[1]; 
     return res[0]; 
    }); 
} 


getFoo(id): Observable<any[]> { 
    return this.service.getFoo().flatMap(fooArr => { 
    return Observable.forkJoin(
     fooArr.map((foo: any) => { 
     return this.service.getBar(foo.id, id) 
     .map((barArr: any[]) => { 
      foo.bar = barArr; 
      return foo; 
     }); 
     }) 
    ); 
    }); 
}