按顺序处理多个嵌套订阅（Angular、RxJs）

Question

我需要从三个 Observable 流的结果构造一个嵌套对象并显示 .所有三个可观察对象都返回一个数组，其中两个取决于第一个的结果。我的代码如下：

this.selectActiveFoos$.pipe(
  concatMap(foos => {
    return foos.map(foo => {
      let bars$ = this.barQuery.selectBarsByFooId(foo.id);  
      let bazs$ = this.bazQuery.selectBazsByFooId(foo.id); // these observables return Observable<T[]>
      return forkJoin([bars$, bazs$]).pipe(
        map(([bars, bazs]) => {
          return { 
            foo: foo,
            bars: bars,
            bazs: bazs
          }
        })
      );
    });
  })).subscribe(result => {
    console.log(result);
  });

}

IntelliSense 告诉我结果的类型符合预期，即 a

{ foo: foo, bars: bar[], bazs: baz[] }

然而，控制台会记录一个 observable 作为输出。这真的让我陷入了困境。我在网上搜索了很长时间，但似乎找不到适用于 Observable 嵌套数组的答案。

如果有任何建议，我将不胜感激！

Answer 1

concatMap 必须接收一个 Observable，你可以使用 forkJoin：

this.selectActiveFoos$.pipe(
  concatMap(foos => {
    return forkJoin(foos.map(foo => {
      let bars$ = this.barQuery.selectBarsByFooId(foo.id);  
      let bazs$ = this.bazQuery.selectBazsByFooId(foo.id); // these observables return Observable<T[]>
      return forkJoin([bars$, bazs$]).pipe(
        map(([bars, bazs]) => {
          return { 
            foo: foo,
            bars: bars,
            bazs: bazs
          }
        })
      );
    }));
  })).subscribe(result => {
    console.log(result);
  });
}