使用外部数组展平嵌套的 Observables 而无需内部订阅 (RxJS)答案

【问题标题】：Flatten nested Observables with outer array without inner subscribe (RxJS)使用外部数组展平嵌套的 Observables 而无需内部订阅 (RxJS)
【发布时间】：2021-04-12 08:04:29
【问题描述】：

给定以下执行异步 HTTP 调用的 TypeScript 函数：

public retrieveAllMembersIdsFromGroup(groupId: string): Observable<string[]>
public retrieveMember(memberId: string): Observable<Member>

如何将其组合在一个函数中以获取所有成员（Observable）？

public retieveAllMembersFromGroup(groupId: string): Observable<Member[]>

例如我想要这样的东西：

public retieveAllMembersFromGroup(groupId: string): Observable<Member[]> {
return this.retrieveAllMembersIdsFromGroup(groupId).pipe(
      map((membersIds: string[]) => {
        //some magic here to call this.retrieveMember(memberId)
        return //Observable<Member[]>;
      })
    );
}

如果可能的话，我不想订阅retrieveAllMembersIdsFromGroup，这样就不必手动处理ID。最好的解决方案是什么？

【问题讨论】：

这里解决了类似的问题：stackoverflow.com/questions/44461271/… 但不幸的是，我无法将该解决方案转移到我的问题中。

标签： angular typescript rxjs nested observable

【解决方案1】：

我不完全明白你在寻找什么魔法，但也许这对你有用？

public retrieveAllMembersFromGroup(groupId: string): Observable<Member[]> {
    return this.retrieveAllMemberIdsFromGroup(groupId).pipe(
      concatMap((memberId: string) => {
        return this.retrieveMember(memberId);
      })
    );
}

请注意，我还更改了一些名称，因为它们要么拼写错误，要么语法奇怪。

【讨论】：

这不起作用，因为retrieveAllMemberIdsFromGroup() 返回一个数组。
@MaikKwi concatMap 发出数组中的每个项目并对每个memberId 执行this.retrieveMember(memberId)，你从retrieveAllMembersFromGroup 得到的是一个成员数组。这不是你想要的吗？
嗯...在您的示例中使用 concatMap 的错误非常明显：类型 'string[]' 不可分配给类型 'string'
@MaikKwi 好的，我做了这个例子stackblitz.com/edit/rxjs-9lhhbt?file=index.ts，基本上你需要将你的响应从第一个函数转换为一个序列，然后你可以调用 concatMap ，然后调用 toArray （没有它订阅将触发 3 次而不是 1)。
您的示例运行良好。但是你用“from”传输一个数组，所以它会产生 Observable。但我有一个 Observable。那么如何将我的 Observable 转移到 Observable？

【解决方案2】：

以下解决方案对我有用：

public retrieveAllMembersFromGroup(groupId: string): Observable<Member[]> {
    return from(this.retrieveAllMemberIdsFromGroup(groupId)).pipe(
      mergeMap((membersIds: string[]) => {
        const members$: Observable<Member>[] = [];
        membersIds.forEach((memberId: string) => {
          members$.push(this.retrieveMember(memberId));
        });
        return combineLatest(members$);
      })
    );
  }

【讨论】：