嵌套的可观察对象在终止后一个接一个地执行

Question

我正在实施 angular 解决方案以首先获取数据库中的所有项目，终止后我从数据库中获取当前选定的框，然后将项目映射到该框。我需要所有的项目都收费，然后在最后拿到盒子做映射，我有以下有效的代码，但是通过嵌套的 observables 有点脏，你们中的任何一个都有更干净的解决方案吗？我在文档中找到了解决方案 os swithMap 但我认为它不适合我的情况，因为开关映射无法使上层可观察对象完成执行内部的

this.getItems().subscribe(items => {
        this.itemsInDataBase = items;
    this.loadActiveBox().subscribe(box => {
        this.selectedBox= box;

        this.selectedBox?.versions.forEach((version, index) => {
            this.itemsInDataBase.forEach((itemInDatabase, index) => {
                version.items.forEach((item, index) => {
                        this.insertItemInbox(item, itemInDatabase, version);
                    }
                );
            });
        });

谢谢米勒

Answer 1

RxJS switchMap 运算符可以用于内部可观察对象 依赖于 外部可观察对象的地方。在您的情况下，由于两个可观察量似乎都是独立的，因此您可以使用 forkJoin 函数。

forkJoin({
  items: this.getItems(),
  box: this.loadActiveBox()
}).pipe(
  tap({
    next: ({items, box}) => {
      this.itemsInDataBase = items;     // <-- are these needed?
      this.selectedBox = box;
    }
  })
).subscribe({
  next: ({items, box}) => {
    box?.versions.forEach(version =>
      items.forEach(itemInDatabase =>
        version.items.forEach(item =>
          this.insertItemInbox(item, itemInDatabase, version)
        )
      )
    )
  },
  error: (error: any) => {
    // handle errors
  }
});

嵌套的可观察对象在终止后一个接一个地执行

nested observables executed one after the other after termination

rxjs

angular