Angular 循环数组并返回每个id在Observable中的数据

使用RxJS v6很难从循环中每个项的子集合中检索数据。无法迭代从HTTP调用检索的抛出数组。合并映射只对单个项执行此操作，其中需要对所有数组项执行此操作

我已经被困在这三天了。我什么都试过了。问题在于，新的管道语法虽然为您提供了组织代码的简洁方法，但并没有简单的方法来循环抛出数据集合。不可能使用MapJavaScript函数，因为它在可观察范围之外，并且返回的项未定义。在互联网上，我只能找到单个mergeMap的基本示例，这些示例非常有用。但是我需要使用 数组中的每个项都使用http调用并向同一对象追加响应

我从第三方的两个端点开始，我无法控制它们。我模拟了一些示例API来进行说明

端点1-返回所有项目ID： http://localhost:3000/contact

{
“名称”：“测试”，
“联系人”：[
{
_id:“5C9DDA9CA9C171D6BA4B87E”
},
{
_id:“5c9ddb82ca9c171d6ba4b87f”
},
{
_id:“5c9ddb8aca9c171d6ba4b880”
}
]
}

端点2-返回单个项信息： http://localhost:3000/contact/5c9dda9aca9c171d6ba4b87e

[
{
“_id”：“5C9DDA9CA9C171D6BA4B87E”，
“名字”：“卢克”，
“lastName”：“Test”，
“电子邮件”：vgadgf@adsgasdg.com",
“创建日期”：“2019-03-29T08:43:06.344Z”
}
]

期望结果-通过使用RxJs v6+返回可观察嵌套数据：

{
“名称”：“测试”，
“联系人”：[
{
“_id”：“5C9DDA9CA9C171D6BA4B87E”。
“关系”：{
“_id”：“5C9DDA9CA9C171D6BA4B87E”，
“名字”：“卢克”，
“lastName”：“Test”，
“电子邮件”：vgadgf@adsgasdg.com",
“创建日期”：“2019-03-29T08:43:06.344Z”
}
},
{
“_id”：“5c9ddb82ca9c171d6ba4b87f”，
“关系”：{
“_id”：“5c9ddb82ca9c171d6ba4b87f”，
“名字”：“名字2”，
“lastName”：“Test2”，
“电子邮件”：vgadgf@adsgasdg2.com",
“创建日期”：“2019-03-29T08:43:06.344Z”
}
},
{
“_id”：“5c9ddb8aca9c171d6ba4b880”，
“关系”：{
“_id”：“5c9ddb8aca9c171d6ba4b880”，
“名字”：“名字3”，
“lastName”：“Test3”，
“电子邮件”：vgadgf@adsgasdg3.com",
“创建日期”：“2019-03-29T08:43:06.344Z”
}
}
]
}

我只是在尝试使用Javascript循环时出错，而使用不同的操作符也不会给我带来太多问题，因为RxJs中的循环存在问题。这是我编写的代码。请提供任何有用的建议或文件

testService.service.ts

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/operators”导入{concatMap，map，mergeMap}；
@可注射（）
导出类TestServiceService{
建造师(
私有http:HttpClient
) { }
public getCombinedData（）：可观察{
返回此值。getMultipleRelationData（）
.烟斗(
地图（（结果：任意）=>{
result=result.contact；
返回结果；
}),
合并映射（（fullResults:any）=>{
返回fullResults[0]。relationship=this.getSingleData（fullResults[0]。\u id）；
})
);
}
公共getSingleData（id）：可观察{
返回此.http.get（'http://localhost:3000/contact/“+id）；
}
public getMultipleRelationData（）：可观察{
返回此.http.get（'http://localhost:3000/contact');
}
}

我当前的最终数据看起来只是一个项目。如果我只想打一个电话就好了。。。然而，它与上面描述的期望输出相差甚远

[
{
“_id”：“5C9DDA9CA9C171D6BA4B87E”，
“名字”：“卢克”，
“lastName”：“Test”，
“电子邮件”：vgadgf@adsgasdg.com",
“_v”：0，
“创建日期”：“2019-03-29T08:43:06.344Z”
}
]

使用嵌套的

mergeMap

和

map

很可能实现这一点。坚持使用Observable的一个关键方法是使用

from

函数将contacts数组扩展为Observable。然后使用

toArray

操作符收集数据。提供文档化示例：

public getCombinedData（）：可观察{
返回此值。getMultipleRelationData（）
.烟斗(
合并映射（（结果：任意）=>
//`from`分别发出每个触点
来自（result.contact）.管道(
//加载每个触点
合并地图(
contact=>this.getSignleData（contact.\u id），
//在结果选择器中，连接获取的详细信息
（原始，详细）=>（{…原始，关系：详细}）
),
//将所有联系人收集到一个数组中
toArray（），
//将新获取的数据添加到原始结果
映射（contact=>（{…result，contact}）），
)
),
);
}

---

编辑：不推荐使用结果选择器 在内部

mergeMap

中，您可以在之后使用

map

public getCombinedData（）：可观察{
返回此.getMultipleRelationData（）管道(
合并映射（（结果：任意）=>
//`from`分别发出每个触点
来自（result.contact）.管道(
//加载每个触点
合并地图(
联系人=>
此.getSignleData（contact.\u id）.pipe(
映射（详细信息=>（{…联系人，关系：d
  public getCombinedData(): Observable<any> {
    return this.getMultipleRelationData()
      .pipe(
        mergeMap((result: any) => {
          let allIds = result.contact.map(id => this.getSingleData(id._id));
          return forkJoin(...allIds).pipe(
            map((idDataArray) => {
              result.contact.forEach((eachContact, index) => {
                eachContact.relationship = idDataArray[index];
              })
              return result;
            })
          )
        })
      );
  }