Question

我是Angular 2的新手，并试图了解我需要在我的应用程序中使用的基本结构。我编写的代码用于在PHP脚本上执行http get请求，该脚本从我的数据库返回一些JSON数据。这是作为我订阅的可观察对象编写的，可以很好地显示模板中的值。但是，一旦这些数据完成下载（或者正在下载？），我需要从JSON数组的每个元素中提取一个UNIQUE值，并在另一个http 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问题，涉及一些运营商，但我会试着简单解释一下。

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

进行一个返回数组Observable的服务调用 - 让我们调用数组'TradeData'中的类型，以便服务返回Observable<TradeData[]>
将单个发射的TradeData数组转换为TradeData项目流。
从TradeData项目流
从上一步获取一组独特的股票代码
为每个独特的股票代码进行服务电话
在一个地方收集步骤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)

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

使用Angular 2可观察数据

1 个答案: