Angular RxJs-无法解析可观察流

因此，我有一个NgRx选择器，它返回一个带有一系列触点的可观测值。我想映射这个流，对于每个联系人数组，映射每个联系人，并向Github发出Http请求以获取他们的配置文件图像，并将其附加到联系人对象。然而，我不知道如何做到这一点，而不以一系列的可观测数据结束

下面是我尝试过的，但这不起作用

this.contacts$: Observable<Contact[]> = this.store.select(getContacts).pipe(
  map(contacts => {
    return contacts.map(contact => {
      return this.contactService.getGithub$(contact._id).pipe(
        map(githubInfo => {
          return {
            ...contact,
            imageUrl: githubInfo.avatar_url
          };
        })
      );
    });
  })
);

this.contacts$：Observable=this.store.select（getContacts.pipe）(
地图（联系人=>{
返回contacts.map（contact=>{
返回此.contactService.getGithub$（contact.\u id）.pipe(
地图（githubInfo=>{
返回{
…联系，
imageUrl:githubInfo.avatar\u url
};
})
);
});
})
);

下面是我收到的错误消息：

Type 'Observable<Observable<Contact>[]>' is not assignable to type 'Observable<Contact[]>'.
  Type 'Observable<Contact>[]' is not assignable to type 'Contact[]'.
    Type 'Observable<Contact>' is missing the following properties from type 'Contact': first_name, last_name, job_title, location, company ts(2322)

类型“Observable”不可分配给类型“Observable”。
类型“Observable[]”不可分配给类型“Contact[]”。
类型“Observable”缺少类型“Contact”的以下属性：名字、姓氏、职务、位置、公司ts（2322）

---

如有任何建议，将不胜感激

这里的问题是，您正在运行一个

数组.map

，它为每个

联系人

返回一个可观察的值。如果您希望Observable返回完整的数组，您将需要如下内容：

this.contacts$：Observable=this.store.select（getContacts.pipe）(
//获取数组并逐个发出每个值
concatMap（contacts=>from（contacts）），
//发出包含联系人和相应githubInfo的数组
concatMap（contact=>forkJoin（of（contact），this.contactService.getGithub$（contact.u id）），
//获取返回的数组并将其转换为对象
map（（[contact，githubInfo]）=>（{…contact，imageUrl:githubInfo.avatar_url}）），
//将所有内容连接到最终数组中
toArray（）
);

我必须承认我已经写了这个在路上，因此没有测试它，但我认为它应该工作

如果维护原始订单很重要，请保持

concatMap

。如果没有，请使用

mergeMap

来提高性能。

this.contacts$：Observable=this.store.select（getContacts.pipe（
地图（联系人=>{
返回contacts.map（contact=>{
返回此.contactService.getGithub$（contact.\u id）.pipe(
地图（githubInfo=>{
返回{…联系人，imageUrl:githubInfo.avatar_url}；
})
);
});
}),
concatAll（）
);

---

只需将

concatAll

操作符添加到管道流中。

使用

switchMap

将您的

联系人

数组映射到一个可观察对象，该可观察对象同时执行您的http请求并将其映射到扩展联系人对象

this.contacts$：Observable=this.store.select（getContacts.pipe）(
开关映射（联系人=>forkJoin(
contacts.map（contact=>this.contactService.getGithub$（contact.\u id）.pipe(
地图（gitHubInfo=>（{…联系人，图像url:gitHubInfo.avatar_url}））
))
))
);

谢谢，威尔！这非常接近，但出于某种原因，它没有发出任何值。如果我删除toArray（），它确实会发出附加了正确imageUrl的单个值。我相信流需要完成toArray（）才能工作。一旦它发出了所有值，您的选择器就应该完成，不是吗？它是一个记忆选择器，在NgRx存储值更改时将重新发出联系人数组。因此，它从未真正完成。我可能错了，但我相信这就是它的工作原理。你完全正确，对不起！我没有用NgRx的术语思考！如果您真的需要一个数组，那么您有一些可能的选择。您可以使用扫描/减少策略，或在提取原始联系人数组的长度后添加

takeUntil

。这有意义吗？没有格式或解释的答案是没有帮助的。