複数の観察可能な通話の可視性を管理するにはどうすればよいですか？

Question

Angular2サービスを開発して、バックエンドサーバーからカテゴリを取得し、カテゴリごとにいくつの「リンク」が存在するかを数えます。 各カテゴリのリンク数を取得したら、値を '保存'するためにJsonオブジェクトにプロパティを追加します。

nbLinks = ''; 

... 

getCategories() { 
     return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => { 
       this.categoriesList = data; 
       for (var i = 0; i < this.categoriesList.length; i++) { 
        var obj = this.categoriesList[i].id; 
        this.category.countLinks(obj).subscribe((linksCount) => { 
         this.nbLinks = linksCount; 

        }, err => { 
         console.log(err); 
        }); 
       } 
       return data; 
      }, 
      err => { 
       console.log(err); 
      } 
     ); 

は私が正しいとJSONオブジェクトにカテゴリを取得しています「」句：ここ

はコードです。 私はこのカテゴリのリンクの数を '数える'ためにJsonをループしています。

私の問題は、ループの外（出て行く）変数iが私のJsonの長さよりも大きいため、アプリがクラッシュすることです。 私の2番目の問題は、this.nbLinksがfor ...ループの外側にあるかどうかです。よろしく

Answer 1

おかげで私はあなたのコードを理解していないが、二つのものが目立つ：

1）あなたは同期および非同期コードを混在しているように見えます。それは動作しません。

同期コード：forループ。非同期コード：観測可能です。

代わりに、オブザーバブルでのみ作業し、すべての操作を連鎖させるようにコードをリファクタリングすることはできますか？あなたはObservable.from()またはObservable.of()という観測値の任意のデータをラップすることができます。例えば

：

getCategories() { 
    const categories = this.category.find({where: {clientId: this.userApi.getCurrentId()}}); 
    return Observable.from(categories) 
      .map(category => countLinksInCategory(category)); 
} 

countLinksInCategory()が非同期動作である場合、その関数が観察を返し、上記のコードで.mergeMap()代わりに.map()を使用しました。

2）内から外部変数を設定避け試してみてください、あなたの

// This part is not ideal 
Obs.subscribe(linksCount => { 
    this.nbLinks = linksCount; 
}); 

私は機能の役割を反映してgetNumLinks()からgetCategories()の名前を変更することをお勧め観察できます。この関数内のObservableの唯一の仕事はという値をに生成することです。次にObservableの消費者はその値を使用できます（割り当て、表示...）。コードの面では

：

getNumLinks(): Observable<number> { 
    // Here, count the number of links - See example code above. 
    // Eventually, return an observable wrapping the final value. 
} 

その後、別の場所で、あなたのコード内：

// This is where you assign the value returned by the Observable. 
// Note that we are OUTSIDE the Observable now. 
getNumLinks().subscribe(numLinks => this.nbLinks = numLinks);