同时使用 RxJs 从图表中检索多个用户的个人资料照片

Question

我有一个 ASP.NET Core API，它将用户列表返回到 Angular 服务。返回的用户对象包含一些属性（id、firstName、lastName）。

我希望我的 Angular 服务从我的 API 端点检索此列表，然后查询 Microsoft Graph 以获取所有返回用户的个人资料图片。我无法找到使用 RxJs 执行此操作的正确方法。

选项的顺序应该是这样的：

• Angular 服务对 API 进行 HTTP 调用
• API 返回用户列表
• Angular 服务迭代返回的用户列表，并向 Microsoft Graph 端点调用每个用户以检索每个用户的个人资料图片
• 从 API 返回的信息和个人资料图片 blob 被映射到单个 Typescript 对象中
• 角度服务返回映射对象的可观察数组（来自 API 的用户信息和来自图形端点的个人资料图片 blob）

我专门寻找 RxJs 运算符来使用，以便：

1. 对值数组执行 foreach
2. 对数组中的每个元素执行 HTTP 调用
3. 将对 API 的原始调用以及对 Graph 的关联 HTTP 调用映射到包含这两个调用的信息的对象中

到目前为止，我可以从用户的 API 中检索数组：

public getEligibleContractors(): Observable<EligibleContractor[]> {
    return this.http.get<ListEligibleContractorsResponse>(`${this.endpointUrl}/eligible`, { observe: 'response' }).pipe(
      take(1),
      map((response: HttpResponse<ListEligibleContractorsResponse>) => {
        return (response.body as ListEligibleContractorsResponse).eligibleContractors
      })
    );
  }

我现在需要获取这一系列符合条件的承包商，并为每个元素调用 Microsoft Graph。

目前，上面的工作函数返回 EligibleContractor[] 的 Observable，但这最终将被映射到 User[]，即具有 id、firstName、lastName 和 profilePicture (blob) 等属性的用户数组。

Answer 1

我在 Reddit 上发布了类似的问题，并从那里的用户那里得到了很好的答案。正是我正在寻找的东西。在这里发帖以防它可以帮助其他人解决类似的问题：

这是 Reddit 上的帖子。

解决方案如下：

this.users$ = this.getUsers().pipe(
      mergeAll(),
      mergeMap((user) =>
        this.getBlob(user.blobId).pipe(
          map((blob) => ({ ...user, blobURL: blob.picture }))
        )
      ),
      toArray()
    );