javascript - Angular RxJs - 在第二个流中填充数组(嵌套流)

Question

我的 Angular 应用程序中有一个特定模型的列表。此列表的每个项目都有一个属性 xyzList .这xyzList属性应该从依赖于第一个请求的 id 的请求中填充。这里有一个例子:

型号:

{
  id: number;
  name: string;
  xyzList: any[]
}

现在我有两个请求:

请求 1:填充模型，但不填充 xyzList

this.myVar$ = this.myService.getElements<Model[]>();

请求2:应该填写xyzList

this.myService.getXyzElements<XyzModel[]>(idOfTheModelOfTheFirstRequest);

起初我是这么想的:

this.myService.getElements<Model[]>()
.pipe(
  mergeMap(items => items)
  mergeMap(item => {
    return this.myService.getXyzElements<XyzModel[]>(item.id)
           .pipe(
             map(xyzList => {
               item.xyzList = xyzList

               return item;
             })
           )
  })
)

这不起作用，因为我已经展平了我的列表，我需要一个 Observable<Array[]> ，但我认为或多或少清楚我想要实现的目标。我想我可以用 forkJoin 来实现例如，但我不知道怎么做。或者有没有办法将扁平化列表转换回列表？

Answer 1

需要使用toArray()，因为mergeMap/flatMap是用来扁平化数据流数组的。它将返回一个数组而不是数据流。

this.myService.getElements<Model[]>()
.pipe(
  mergeMap(items => items)
  mergeMap(item => {
    return this.myService.getXyzElements<XyzModel[]>(item.id)
           .pipe(
             map(xyzList => {
               item.xyzList = xyzList

               return item;
             })
           )
  }),
  toArray()
)