Question

我正在使用Angular中的HttpClient进行API调用。它返回User的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。我怎样才能有效

将图片网址保存在用户$
在模板中显示图片（img标签）

我不想让图像连同用户名和电子邮件

Answer 1

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

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列表而不是数组。

将属性添加到observable中返回的每个数组元素

1 个答案: