Question

我有一个Observable数组，我通过将HTTP请求推送到Observable数组来创建。

完成这些请求之后，我forkJoin Observables的集合，然后从那里开始，我想循环遍历这个集合，对每个项目执行一些功能，然后最后执行一个最后一种方法。

我有类似的东西：

// Firstly, get all of the items
private _getItems(): Observable<MyItems[]> {
    let items: Observable<MyItems>[] = [];

    Object.keys(this._items).map(item => {
        items.push(this.service.getItemState(item))
    });

    return Observable.forkJoin(items);
}

// Secondly, loop through items and perform function
this._getItems()
    .map(items => items.map(item => {
        this._setState(item);
    }))
    // Finally, do my last method
    .subscribe(() => {
        this._prepareItems();
    });
}

我不知道为什么，但this._setState(item)永远不会被召唤。这是正确的做法吗？

由于

Answer 1

首先forkJoin是一个很好的选择，因为它等待你的所有http请求完成。但我不确定你的对象上的forEach是否有效？不会是这样的：

Object.keys(this._items).map((key, index) => {
     items.push(this.service.getItemState(this._items[key]))
});

在第二个示例中，您使用带有forkJoin observable作为源的map创建一个新的observable。您使用map但不要映射任何内容，而是使用tap()（在RxJS 5.5之前被称为do()）

我强烈建议您在几乎每行代码中插入一个console.log，看看它是否正常工作。对象上的forEach是否有效？ _getItems（）每次发出什么？（使用do / tap for console.log）

顺便说一句，你不应该把所有东西称为“项目”。 this._setState(item);可能更像是this._setState(itemState);不是吗？

Answer 2

无论您使用何种版本的Angular / RxJS，这都应该有效。

＆＃13;

// Your code that isn't working:
/*// Firstly, get all of the items
private _getItems(): Observable<MyItems[]> {
  let items: Observable<MyItems>[] = [];

  Object.keys(this._items).map(item => {
    items.push(this.service.getItemState(item))
  });

  return Observable.forkJoin(items);
}

// Secondly, loop through items and perform function
this._getItems()
    .map(items => items.map(item => {
        this._setState(item);
    }))
    // Finally, do my last method
    .subscribe(() => {
        this._prepareItems();
    });
}*/

// Code rewritten (Angular 2-4 / RxJS 2-4):
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

private _getItems(): Observable<MyItems[]> {
  return Observable.forkJoin(
    Object.keys(this._items)
      .map(item => this.service.getItemState(item))
  );
}

this._getItems()
  .map(items => items.map(item => {
    this._setState(item);
    return item;
  }))
  .subscribe(
    item => this._prepareItems(),
    err => console.error(err)
  );

// Code rewritten (Angular 5+ / RxJS 5+):
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

private _getItems(): Observable<MyItems[]> {
  return Observable.combineLatest(
    Object.keys(this._items)
      .map(item => this.service.getItemState(item))
  );
}

this._getItems()
  .pipe(
    tap(items => items.map(item => this._setState(item)))
  )
  .subscribe(
    item => this._prepareItems(),
    err => console.error(err)
  );

＆＃13;

在Observable Stream上调用地图不调用函数

2 个答案: