Angular с Akita и Rxjs, имеющими проблемы с foreach внутри внешнего наблюдаемого

Я новичок в Angular с Akita.

У меня есть приложение, в котором пользователи загружаются и устанавливаются в магазине. у всех пользователей начальное свойство imageUrl установлено, например: «http://testxxxxxx». Компонент запрашивает хранилище для всех пользователей и передает вызов метода, который проходит через каждого человека, делает вызов API, чтобы получить ответ изображения «blob». из API и обновите хранилище с помощью imageUrl = 'blob:http:2fk2fjadkf', а компонент задает ‹img src='imageUrl'.

Но по какой-то причине метод внутри внешнего наблюдаемого много раз зацикливается. не знаю почему.

Вот мой код:

Составная часть:

peopleToShow$ = this.peopleFacade.peopleToShow$;

Component.html использует peopleToShow$ и свойство imageUrl каждого человека. Прямо сейчас он не принимает обновленный URL-адрес большого двоичного объекта, который установлен в this.loadImagesAsBlobs.

Фасад:

  peopleToShow$ = this.peopleQuery.peopleToShow$
  .pipe(
    tap((people) => this.loadImagesAsBlobs(people))
  );

private loadImagesAsBlobs(people: Person[]) {
    people.forEach((person) => {
      if (!person.isUrlChecked) {
        this.imageDataService
          .getAndStoreImageOnClient(person.imageUrl)
          .pipe(
            take(1),
            switchMap((safeUrl) => {
              this.updatePersonWithBlobImageUrl(person.id, safeUrl);

              return EMPTY;
            }),
            catchError(() => {
              this.updatePersonWithBlobImageUrl(person.id, null);

              return EMPTY;
            })
          )
          .subscribe();
      }
    });
  }

  private updatePersonWithBlobImageUrl(id: number, blobUrl: SafeUrl) {
    this.peopleStore.updatePersonWithBlobImageUrl(id, blobUrl as string);
  }

Спасибо


rxjs angular11 angular-akita akita
person Mukil Deepthi    schedule 18.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этого нет в этом коде, но когда у у меня была эта проблема, это было из-за того, что у меня было несколько вещей, прослушивающих один наблюдаемый объект, что означает, что все это происходило несколько раз.

Исправить, изменить

peopleToShow$ = this.peopleQuery.peopleToShow$
.pipe(
  tap((people) => this.loadImagesAsBlobs(people))
);

to

peopleToShow$ = this.peopleQuery.peopleToShow$
.pipe(
  tap((people) => this.loadImagesAsBlobs(people)),
  share()
);

или используйте shareReplay(1) вместо этого, если вы беспокоитесь о том, что peopleToShow$ будет генерироваться до того, как все последующие настройки будут настроены.

person JSmart523    schedule 18.06.2021