使用 Angular 2 可观察数据

Question

我对 Angular 2 非常陌生，并试图了解我需要在我的应用程序中使用的基本结构。我编写了代码来对 PHP 脚本执行 http get 请求，该脚本从我的数据库返回一些 JSON 数据。这是作为我订阅的 observable 编写的，并且可以很好地显示模板中的值。但是，一旦此数据完成下载（或正在下载？），我需要从 JSON 数组的每个元素中提取一个 UNIQUE 值，并在另一个 http get 上的查询字符串中使用该值。考虑存储在数据库中的股票代码，然后运行第二次 get 从 REST 服务中检索股票数据。股票代码可能会重复很多次，所以我只想对每个 UNIQUE 值执行第二个 http get 请求（例如，只从 REST 服务获取一次 MSFT）。

需要循环从这些股票数据中返回的数据以提取特定的数据值，其中一些将完全按原样使用，而另一些将用于计算，并显示其结果。

如何构建代码来完成这些额外的计算？

我的代码目前看起来像这样（显然 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

这是一个比较高级的RxJs问题，涉及到几个算子，但我尽量简单解释一下。

如果我理解正确，您正在寻找的步骤是：

1. 进行服务调用，返回数组的 Observable - 让我们调用数组 'TradeData' 中的类型，因此服务返回 Observable<TradeData[]>

2. 将单个发出的 TradeData 数组转换为 TradeData 项流。

3. 从 TradeData 项目流中提取股票代码

4. 从上一步获取一组唯一的股票代码

5. 为每个唯一的股票代码进行服务调用

6. 将步骤 4 中调用的所有结果收集到一个位置。

这看起来像：

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)

请注意，与简单地订阅初始调用然后为每个项目进行服务调用相比，一个主要优势是您可以在一个地方获得整个结果，并且您还可以在一个地方处理所有错误。