2つの観測結果を角度で結合する方法は？

Question

2つの観測結果をどのように組み合わせるか？

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 
     this.data1 = data1; 
    }); 

this.http.get(url2) 
    .map((res: Response) => res.json()) 
    .subscribe((data2: any) => { 
     this.data2 = data2; 
    }); 

toDisplay(){ 
    // logic about combining this.data1 and this.data2; 
} 

以上、我々はすぐにDATA1とDATA2を得ることができなかったので、間違っています。

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 
    this.http.get(url2) 
     .map((res: Response) => res.json()) 
     .subscribe((data2: any) => { 
      this.data2 = data2; 

      // logic about combining this.data1 and this.data2 
      // and set to this.data; 
      this.toDisplay(); 
     }); 
    }); 

toDisplay(){ 
    // display data 
    // this.data; 
} 

私は結果を2番目の観測可能なサブスクライブする方法で組み合わせることができます。 私の要件を達成するのがよい習慣であるかどうかはわかりません。

更新：
私が見つけたもう一つの方法は、結果を結合し、新しい観測可能を返すようにforkJoinを使用しています。これを行うための素晴らしい方法

let o1: Observable<any> = this.http.get(url1) 
    .map((res: Response) => res.json()) 

let o2: Observable<any> = this.http.get(url2) 
    .map((res: Response) => res.json()); 

Observable.forkJoin(o1, o2) 
    .subscribe(val => { // [data1, data2] 
    // logic about combining data1 and data2; 
    toDisplay(); // display data 
}); 

toDisplay(){ 
    // 
} 

Answer 1

が（BTW角度に含まれている）オペレータforkjoin rxjsを使用することで、これは、コールバックを使って関数の後に関数を入れ子にしなければならないネストされた非同期関数の地獄からあなたを遠ざけます。ここで

は素晴らしいforkjoin使用する方法についてのチュートリアル（およびそれ以上）です。例では

https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

次の2つのHTTP要求を作成して、購読脂肪矢印機能に応答がの配列ですあなたが合うようにあなたが一緒に持って来ることができる結果：

let character = this.http.get('https://swapi.co/api/people/1').map(res => res.json()); 
let characterHomeworld = this.http.get('http://swapi.co/api/planets/1').map(res => res.json()); 

Observable.forkJoin([character, characterHomeworld]).subscribe(results => { 
    // results[0] is our character 
    // results[1] is our character homeworld 
    results[0].homeworld = results[1]; 
    this.loadedCharacter = results[0]; 
}); 

配列の最初の要素は、常にようにあなたに渡す最初のHTTPリクエストに対応します。私はこれを数日前に4回の同時リクエストで成功裏に使用し、それは完全に機能しました。

Answer 2

以下のように第一observableのcompletion eventで第2の呼を書く

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 

     this.data1=data1; 

    },(error=>{}),()=>{ 
     this.http.get(url2) 
      .map((res: Response) => res.json()) 
      .subscribe((data2: any) => { 
       this.data2 = data2; 
      }); 
    }); 

Answer 3

両方の観測値が一度値を出すと値を放出するzip演算子が必要です。

REF：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip