javascript - 连续执行动态创建的可观察数组

标签 javascript angular rxjs rxjs5

我正在开发一个项目 (Angular2),我在其中动态创建 Observables 并将它们放入数组中

var ObservableArray : Observable<any>[] = [];
//filling up Observable array dynamically
for (var i = 0; i < this.mainPerson.children.length; i++) {       
ObservableArray.push(Observable.fromPromise(this.determineFate(this.mainPerson.children[i])));
  }
}


var finalObservable: Observable<any> = Observable.concat(ObservableArray);

finalObservable
  .subscribe( data => {
    //here  I expected to execute determineFate() for all observables inside array  
    console.log("determine fate resolved data returned [" + data + "]");
  }, error => {
    console.error("error on Age Year for Characters")
  },() => {  
    //Here I expect this gets executed only when all Observables inside my array finishes 
    console.log("determine fate resolved data returned COMPLETED");
    //DB call
  });

  determineFate(..): Promise<boolean> {
       ...
       return either true / false if success or error;

 }

我想执行一个系列中的所有可观察对象(forkJoin 似乎是并行运行的 - 所以使用了 concat)。一旦执行了所有可观察对象,就想执行一些与数据库相关的代码。但似乎我在“已完成” block 中的代码不会等待所有 Observables 完成。我怎样才能做到这一点?

提前致谢

最佳答案

使用 Observable.concat(ObservableArray) 只会展平数组并从 ObservableArray 一个接一个地发出每个 Observable。顺便说一句,使用 concat 的静态版本只有在有两个或更多参数时才有意义(参见 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-concat )。

相反,您可以使用 concatAll() 运算符迭代 Observable 数组并等待它们一个一个完成。

此示例模拟您的用例:

var observableArray = [];
// filling up Observable array dynamically
for (var i = 0; i < 10; i++) {
  observableArray.push(Observable.of('Value ' + i));
}

Observable.from(observableArray)
  .concatAll()
  .subscribe(console.log, null, () => console.log('completed'));

Observable.from() 分别发出每个 Observable,并且 concatAll() 按照发出的顺序订阅每个 Observable。

此演示打印控制台输出以下内容:

Value 0
Value 1
Value 2
Value 3
Value 4
Value 5
Value 6
Value 7
Value 8
Value 9
completed

关于javascript - 连续执行动态创建的可观察数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43133405/

相关文章:

javascript - 检查未知对象中的对象是否存在的最有效 Javascript 方法

angular - 是否有非手动方式来创建 Angular 6 路由器路径的类目录结构?

angular - 将 *ngIf 与 angular4 自定义管道一起使用

javascript - RxJS bufferWithCount() 不会因超时而暂停

angular - rxjs pairwise 发出重复值

javascript - 谷歌地图 api 3 上的信息窗口帮助

javascript - 使用 foreach 将值插入数组

javascript - 如何通过评估表达式来制作自定义 HTML id

angular - graphql-tag 的 Webpack 加载器未在 Angular 8 中加载

RxJs:您可以将运算符作为参数传播到管道运算符中吗