Добавьте свойство к каждому элементу массива, возвращаемому в наблюдаемом

avatar
sam
8 апреля 2018 в 04:29
35
1
2

Я делаю вызов API, используя HttpClient в Angular. Он возвращает массив JSON User.

.
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-адрес изображения пользователя. Как я могу эффективно

  1. Сохранить URL-адрес изображения в Users$
  2. Показать картинку в шаблоне (тег img)

Я не хочу получать изображения вместе с именем пользователя и адресом электронной почты

Источник
Adrian Fâciu
8 апреля 2018 в 05:56
1

В чем проблема, если вы прочитаете URL-адрес изображения вместе с именем и адресом электронной почты? Я ожидаю, что API будет работать так.

Ответы (1)

avatar
Meir
8 апреля 2018 в 09:05
0

Как сказал @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 использует список аргументов, а не массив.