Question

我是Angular的新手，更不用说反应式编程了，我很难在图书馆周围探索并了解一切应该如何协同工作。

关于Stack Overflow已经有很多关于此的问题，但我看到的所有问题都没有解决我在这里处理的情况。

我有两个Observables对象列表。 var obsrv1 = Observable<Object1[]>，var obsrv2 = Observable<Object2[]>。

我们说我拥有API调用和内容的所有基础逻辑，通常，当我执行类似obsrv1.subscribe(results => this.objectArray = results)的操作时，它会执行异步操作并最终得到我的数据。

现在，我的两个observable有一个问题，那就是其中一个依赖于另一个列表。当两个数据列表完成后，我需要做一个动作将它们连接成另一种对象。

对此的一个解决方案就是做这样的事情：

obsrv1.subscribe(
  obsrv1Results => {
  this.object1Array = obsrv1Results
  },
  err => {},
  () => {
    obsrv2.subscribe(
      obsrv2Results => {
        this.object2Array = obsrv2Results
      },
      err => {},
      () => onDataLoadComplete();
    );
  }
);

这样可行，但感觉非常黑客。我已经认识到有一种更优雅的方式可以做到这一点，听起来人们建议用forkJoin做一些事情，但我不知道如何让它发挥作用。听起来他们建议做forkJoin([obsrv1, obsrv2]).subscribe(...)，但是使用我的代码执行此操作不会产生任何结果，并且永远不会调用subscribe回调。有人说要做forkJoin([obsrv1.first(), obsrv2.first()])，但这样做并不起作用，当我做console.log时，我得到的唯一结果就是,。

对于它的价值，在我的应用程序中我使用的是ngrx / store和ngrx / effects。检索我的数据的调用如下所示：

this.store.select(state => state.myDataContainer.dataList)返回Store<MyDataType[]>。根据我收集的内容，Store<T>对象必须是某种形式的可观察对象，因为您可以订阅它们。

如何在异步检索两组数据并在两组数据完成时触发回调？

Answer 1

听起来你应该使用.pipe(flatMap())运算符。您可以使用它来使用一个Observable的结果并返回另一个Observable，这是您想要描述的内容。

The ReactiveX.io website非常善于可视化和解释这些事情。

这是一个开箱即用的示例：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { flatMap } from 'rxjs/operators';

//emit 1
const source = Observable.of(1);
//do something with value
const example = source.pipe(flatMap(value => {return Observable.of(value + 10)}));
//output: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

以下是您的代码实现此内容的原因：

obsrv1.pipe(
  flatMap(obsrv1Results => {
    this.object1Array = obsrv1Results;
    return obsrv2;
  })
).subscribe(obsrv2Results => {
  this.object2Array = obsrv2Results;
  onDataLoadComplete();
});

如果您需要，请不要忘记导入flatMap：

import { flatMap } from "rxjs/operators";

祝你好运！

Angular等待多个observable完成

1 个答案: