Angular2：嵌套订阅与循环内的第二个订阅

Question

我刚刚使用 Angular2 一周大！

基本上有 2 个 API 调用。

1. 第一个 API 调用给我一个 json 对象的数组 (queryResults)。 （第一次订阅）
2. 在视图中显示该数组。
3. 遍历 (queryResults) 数组并选择一个特定的键：每个数组元素中的值对 (queryResults[i].oldLastSeen)。
4. 将该值 (oldLastSeen) 作为请求参数传递给另一个 API，从而得到一个字符串 (newLastSeen)。 （第二次订阅）
5. 在 queryResult 中将 oldLastSeen 替换为 newLastSeen

由于 Observable 的异步特性，问题出现在第 5 步。我无法访问内部订阅内的queryResults[i].oldLastSeen，基本上是未定义的。因此 lastSeen 不会更新。

首先调用getLastSeen()， 代码如下所示：

temp: any[];
rows: any[];

getLastSeen() {
    this._someService.getQueryResults(this.query)
      .subscribe(queryResults => {
        this.rows = queryResults;
        this.updateLastSeen(this.rows);
      });
}

private updateLastSeen(rows) {
    this.temp = rows; //temp: any[];
    for(var i=0; i<this.temp.length; i++) {
        if(this.temp[i].id != null || this.temp[i].oldLastSeen != null) {
            //Some operations here
            this._someService.getNewLastSeen(this.temp[i].oldLastSeen)
                .subscribe(
                    newLastSeen => {
                        this.rows[i].oldLastSeen = newLastSeen; //This doesnot happen!
                    },
                    error => alert(error),
                    () => console.log("Finished.")
                );
        }
    }
  }

从 2 天以来一直在敲我的头，遇到了 flatMap、switchMap 等。但对它们的使用高度怀疑。

更新：工作代码：

我按照 Bryan 的反馈，对他建议的代码进行了一些修改。这对我有用：

this._someService.getQueryResults(this.query)
      .do(qr => {this.rows = qr;})
      .flatMap(queryResults => Observable.from(queryResults))
      .filter(queryItem => queryItem["id"] != null || queryItem["oldLastSeen"] != undefined)
      .do(queryItem => { // did some operations/ manipulations here})
      .mergeMap(queryItem => this._someService.getNewLastSeen(this.queryItem["oldLastSeen]),
           (queryItem, newLastSeen) => [queryItem, newLastSeen])
      .subscribe(([queryItem, newLastSeen]) => {
        queryItem.oldLastSeen = newLastSeen
      }); 

Answer 1

一般来说，如果您有嵌套订阅，则您正在处理一种可以改进的反模式。我还没有找到一个令人信服的案例来使用它。我不确定对 flatMap 或 switchMap 持怀疑态度意味着什么，但它们是非常有用的运算符，尤其是 switchMap。如果你的工具包中没有 switchMap，你将无法做超出 rxjs 基础的很多事情。

getLastSeen() {
    this._someService.getQueryResults(this.query)
      .do(qr => this.rows = qr;)
      .flatMap(queryResults => Observable.from(queryResults))
      .filter(queryItem => queryItem.id !== null || queryItem.oldLastSeen !== null)
      // you can insert a map or do operator here to accomplish the operations you mention, depending on what they are, or you can possibly just do them inside switchMap
      .switchMap(queryItem => this._someService.getNewLastSeen(queryItem.oldLastSeen),
           (queryItem, newLastSeen) => [queryItem, newLastSeen])
      .subscribe(([queryItem, newLastSeen]) => queryItem.oldLastSeen = newLastSeen);

}

一块一块地看：

1. 你得到你的查询

2. 您将结果设置为视图。功能纯粹主义者会说在这里这样做是不好的做法，因为它使用了副作用，但无论如何。我不是纯粹主义者。

3. 这很棘手，但是您将结果扁平化为可观察的流。您从结果数组创建一个可观察对象，然后 flatmap 将它们一一发出，您也可以在这里使用 .mergeAll() 。这是一种更被动的结果循环方式。

4. 过滤掉你不感兴趣的项目

5. “操作”的占位符行，可能是 map 或 do，很难在不知道所需效果的情况下说。也可能只是在 switchMap 中可行，但要注意样式并保持运算符简洁。

6. switchMap 到新的 observable 中，switchMap 将订阅内部 observable 并发出结果，关键是 switchMap 的第二个参数，它允许您组合来自内部和外部 observable 的项目。这里我们只是将它们放入一个数组并发出两个值的数组

7. 重置订阅中的项目。这里唯一有趣的是使用打字稿语法，它可以让你命名数组中的项目，因为你知道你得到了一个包含 2 个项目的数组。