在 Angular 5 中继续循环之前等待 for 循环中的 observable 完成

Question

我正在循环访问对象数组（称为项目）。forEach 循环包含一个返回可观察值的服务调用。我试图等待处理数组中的下一个项目，直到循环内的可观察对象完成。我应该用什么？我已经尝试过 forkJoin 了。

projects
    .forEach(project => {
        this.imageService.getProjectImages(project.projectId.toString(), true, true, undefined)
            .catch(err => observer.error(err))
            .finally(() => {
                // process next project
            })
            .subscribe((image: FileRepresentation) => {
                data.image = image;
                this.getSlide(project, data);
            });
})

Answer 1

如果您想同时运行一个 Observable，并在上一个 Observable 完成后才启动下一个 Observable，那么这forkJoin不是一个好的选择，因为它会立即订阅所有源 Observable。一种更好的方法是使用所谓的高阶 Observable 并通过以下方式逐个订阅concatAll：

const projects = [
  Observable.of(1).delay(1000),
  Observable.of(2).delay(1000),
  Observable.of(3).delay(1000),
];

Observable.from(projects)
  .concatAll()
  .subscribe(console.log);

这通过创建一个延迟 1 秒的 Observable 来模拟 HTTP 调用。如果运行此示例，您将看到它以 1 秒的延迟打印每个数字：

查看现场演示：http://jsbin.com/zocuma/3/edit ?js,console