角度2の観測可能なデータの使用

Question

私はAngular 2の新機能で、アプリケーションで使用する必要がある基本構造を理解しようとしています。私は、データベースからいくつかのJSONデータを返すPHPスクリプトでhttp getリクエストを行うように書かれたコードを持っています。これは、私が購読しているテンプレートの値を表示することができる観察可能なものとして書かれています。しかし、このデータのダウンロードが終了すると、JSON配列の各要素からUNIQUE値を抽出し、その値を別のhttp getのクエリ文字列で使用する必要があります。データベースに格納されている株式のシンクを考え、2番目のgetを実行してRESTサービスからストックデータを取得します。株価記号は何度も繰り返すことができるので、各UNIQUE値に対して2回目のhttp get要求を実行したいだけです（たとえば、RESTサービスからMSFTを1回だけ取得するなど）。

これらの各ストックデータ取得から返されるデータは、特定のデータ値を抽出するためにループする必要がありますが、一部はそのまま使用され、残りは計算に使用され、その結果が表示されます。

これらの余分な計算を行うためにコードをどのように構造化すればよいですか？

私のコードは、現在この（明らかにconsole.logはデバッグ目的のためである）のようになります。

ngOnInit() { 
    this._tradeService.getTradeData() // get database data 
     .subscribe(
      res => this.mspTradeData = res, 
      error => alert(error), 
     () => console.log(this.mspTradeData) 
     ); 

    // TODO 
    // get unique symbols for REST service queries 
} 

任意のヒントや指導をいただければ幸いです。

Answer 1

これはいくつかの演算子を含む比較的高度なRxJの問題ですが、簡単に説明しようとします。

私が正しく理解していれば、あなたが探しているの手順は次のとおりです。

1. 配列の観測を返すサービスコールしてください - さんは「TradeData」配列内のタイプを呼ぶことを、そうサービス返品Observable<TradeData[]>

2. TradeDataの単一放出配列をTradeData項目のストリームに変換します。

3. ユニークな銘柄記号

のそれぞれのサービスコールを作る前の段階

4. から銘柄記号のユニークなセットを取得しますTradeData項目

5. の流れから銘柄記号を抽出

6. ステップ4のコールの結果をすべて1か所で収集します。単に最初の呼び出しに加入して、各項目のサービスコールを作る以上の主要な利点は、あなたが1で全体の結果を得ることであることを

   this._tradeService.getTradeData() // 1. make the api call 
       .concatAll() // 2. convert stream of single item to stream of items 
       .map(tradeDatum => tradeDatum.stockSymbol) // 3. extract the stock symbols 
       .distinct() // 4. filter the stock symbols to a unique list 
       .flatMap(stockSymbol => getStockData(stockSymbol) // 5. get the data for each stock symbol 
       .toArray() // 6. collect the stream items into an array 
       .subscribe(console.log) 
   

   注：

これは次のようになりますすべてのエラーを1か所で処理することもできます。