在对象上操作时链接递归RxJS观测值

Question

我的后端有两个图形查询：famyTreeQuery，它返回一个家谱作为有孩子的节点，也可以有孩子等等，和人PicturesQuery（$name： string），它返回给定人的图片。

我的目标是调用familyTreeQuery，迭代树，如果这个人被称为Alice，那么我想为这个人调用人PicturesQuery，并将信息添加到树中的节点。这应该为树上的所有爱丽丝做。

我的问题是，获取图片的调用是异步的，因此在信息添加到节点之前会返回数据。我没有按照这个问题中的建议使用flatMap，因为调用获取图片是在迭代树时发生的，我不能在familyTreeQuery的管道方法中调用它。

public getContext(): Observable<TreeNode> {
  return this.familyTreeQuery.watch().valueChanges.pipe(
    map(result => {
      const familyTree = result.data.familyTree;;
      this.addPicturesToAlice(familyTree);
      return familyTree;
      
    })
  )
}

private addPicturesToAlice(node: TreeNode) {
  if (node.name === 'Alice') {
    this.fetchPictures(node.id).subscribe(pictures => {
      node.pictures = pictures;
    })
  }
  if (node.children && node.children.length > 0) {
    for (const childNode of node.children) {
      this.addPicturesToAlice(childNode);
    }
  }
}

private this.fetchPictures(personId): Observable<Picture[]> {
  return this.personPicturesQuery.fetch({id: personId}).pipe(
    map(result => {
      return result.data.personPictures;
    })
  )
}

据我所知，我不应该在addPicturesToAlice方法中调用订阅，但我是Angular和RxJS的新手，没有找到一种方法来实现这一点。

Answer 1

您可以通过创建一个可观察的数组并递归传递它，然后使用forkJoin在getContext中订阅它来实现这一点，如下所示：

public getContext(): Observable<TreeNode> {
  return this.familyTreeQuery.watch().valueChanges.pipe(
    switchMap(({ data: { familyTree } }) => forkJoin(this.addPicturesToAlice(familyTree)))
  )
}

private addPicturesToAlice(node: TreeNode, observables: Observable<Picture[]>[] = []): Observable<Picture[]>[] {
  if (node.name === 'Alice') observables.push(
    this.fetchPictures(node.id).pipe(tap(pictures => node.pictures = pictures))
  )

  if (node.children?.length) {
    for (const childNode of node.children) {
      this.addPicturesToAlice(childNode, observables);
    }
  }

  return observables;
}

private fetchPictures(personId: number): Observable<Picture[]> {
  return this.personPicturesQuery
    .fetch({ id: personId })
    .pipe(map(result => result.data.personPictures))
}

希望足够清楚。