複数の観測値を順序付ける方法

Question

Angular2とフロントエンドの開発には一般的に新しいので、わかりやすい答えが見つからない場合は謝ります。

私はAngular2アプリを開発中です。私が取り組んでいるコンポーネントでタスクを達成する最善の方法についてはわかりません。 OnInitライフサイクルフックの間に

ngOnInit() { 
    console.log("init component"); 
    console.log(this.activatedRoute); 

    this.paramSub = this.activatedRoute.params.switchMap(
     (params: Params) => this.personSearchService.getPerson(params['personId'])) 
     .subscribe(result => this.personDetails = result); 

    this.orgSub = this.personSearchService.getPersonFedOrgs(0).subscribe(
     results => this.orgs = results, 
     error => console.log(error) 
    ); 

    //pseudo-code 
    watch this.orgs and this.personDetails 
     if change 
      do logic 
} 

、私は2つのことを行う、私が取得し、サービスとルートパラメータを使用して、私はまた、第2のサービスから組織のリストを取得します。そのすべてがうまくいきます。

擬似コードとラベル付けしたセクションは、追加したい機能です。私は最初の2つのサービスコールの結果を受け取り、ビジネスロジックを実行したいと思います。

私はthis.personDetailsとthis.orgを直接使用することはできませんが、非同期呼び出しが解決されるまでは未定義であるためです。だから私は彼らが更新されるたびにいくつかのロジックを実行できるようにObservableでそれらをラップする必要があると思います。しかし、私はそれをどうやって行うのか正確には分かりません。正しい方向のポインターがあれば幸いです。

Answer 1

cobmineLatest()演算子を使用できます。私は、コードをリファクタリングし、読みやすくするためのビット：

personDetails$ = this.activatedRoute.params 
    .map((params: Params) => params['personId']) 
    .switchMap(id => this.personSearchService.getPerson(id)) 

orgs$ = this.personSearchService.getPersonFedOrgs(0) 

Observable.combineLatest(personDetails$, orgs$) 
    .subscribe(([details, orgs]) => { 
    console.log(details, orgs); 
    }) 

インポートすることを忘れないでくださいオペレーター：ストリームのどちらかが放出された場合、それは価値を発するだろう

import 'rxjs/add/observable/combineLatest'; 

Answer 2

CombineLatestは、除いて、仕事をしていませんいずれの値であっても、両方が実際に値を出力したときに通知を受けることは確実ではありません。このため

、あなたはそれらを圧縮する必要があります。d

this.paramSub = this.activatedRoute.params.switchMap(
     (params: Params) => this.personSearchService.getPerson(params['personId'])); 

    this.orgSub = this.personSearchService.getPersonFedOrgs(0) 


Observable.zip(this.paramSub, this.orgSub) 
    .subscribe(result) => { 
    console.log(result); 
    })