Блог

Главная - Вопросы по программированию - Angular2 — объединение 2 наблюдаемых вызовов в один

Angular2 — объединение 2 наблюдаемых вызовов в один

#angular #typescript #rxjs #observable

#angular #typescript #rxjs #наблюдаемый

Вопрос:

Я пытаюсь объединить оба этих вызова в один, чтобы они вызывались асинхронно или последовательно. Я думаю, мне нужно использовать, map или switchMap.

ImageType — это перечисление.

Он должен возвращаться как строковый uri.

перечисление

 export enum ImageType {
    Avatar = 1,
    Cover = 2
}

component.ts

 this.service.getphotos(ImageType.Avatar, this.id).subscribe(result => {
    this.avatarPhotos = resu<
});

this.service.getphotos(ImageType.Cover, this.id).subscribe(result => {
    this.coverPhotos = resu<
});

service.ts

 getPhotos(imageType: ImageType, id: number): Observable<string[]> {
    return this.http.get<string[]>(`api/getphotos/${imageType}/${id}`);
    }

Комментарии:

1. Вы можете использовать combineLatest

2. Ответ будет отличаться в зависимости от того, что вы хотите, чтобы произошло, если один из вызовов завершится неудачно. Каково ожидаемое поведение?

3. Я об этом не подумал. В настоящее время, если изображение недоступно, у меня есть изображение по умолчанию, которое реализовано onError в <IMG> . Если один вызов завершается с ошибкой, я бы хотел, чтобы это было ошибкой (я удалил ошибку для удобства чтения).

4. Спасибо, я посмотрю combineLatest

Ответ №1:

Простое решение здесь:

 combineLatest([
  this.service.getphotos(ImageType.Avatar, this.id).pipe(
    tap(result => (this.avatarPhotos = result)),
  ),
  this.service.getphotos(ImageType.Cover, this.id).pipe(
    tap(result => (this.coverPhotos = result)),
  )
]).subscribe()

Вы можете сделать это с forkJoin помощью любого из них.

Комментарии:

1. Я думаю, что это должно быть «tap (result=> (this.avatarPhotos = result))», поэтому, пожалуйста, отредактируйте, если это так. Я пометил это как правильный ответ. Спасибо за помощь. Я потрачу сегодняшний день на RxJS!

2. @Robgit28 Да, спасибо!

3. На самом деле это не очень хорошая практика в примере, только если свойства нет в шаблоне. Если это в шаблоне, просто используйте async вместо этого канал.

Метки: