为 observable 中返回的每个数组元素添加一个属性答案

【问题标题】：Add a property to every array element returned in observable为 observable 中返回的每个数组元素添加一个属性
【发布时间】：2018-04-08 04:29:20
【问题描述】：

我正在使用 Angular 中的 HttpClient 进行 API 调用。它返回一个用户的 JSON 数组。

users$ = this.httpClient.get<User[]>('api1')

我正在使用模板中的异步管道向用户（姓名和电子邮件）显示。

<div *ngFor="let user user of users$ | async">
<h1>{{user.name}}</h1>
<h2>{{user.email}}</h2>
</div>

现在，对于每个用户，我需要进行另一个（不同的）API 调用来获取用户的图片 URL。我怎样才能有效地

将图片URL保存在users$中
在模板中显示图片（img标签）

我不想连同用户名和电子邮件一起获取图像

【问题讨论】：

如果您阅读图片网址以及姓名和电子邮件会出现什么问题？我希望 API 能够像这样工作。

标签： angular rxjs5 angular-httpclient

【解决方案1】：

正如@adrian-fâciu 在评论中所说，将其添加为与原始响应一起返回的字段可能是一个更好的主意，但是，如果您仍需要添加数据，则应该增加 users$，或者在服务级别或组件上。

function userWithEmail(user) {
  return getUserEmail(user)
    .map(email => {
      return {...user, email};
    });
}

const usersWithEmail = users$
  .map(users => Observable.forkJoin(...users.map(user => userWithEmail(user));

注意扩展 (...) 运算符是必需的，因为 forkJoin 获取 args 列表而不是数组。

【讨论】：