0

我是秋田的 Angular 新手。

我有一个应用程序，用户在其中加载并设置在商店中。所有用户都有一个初始 imageUrl 属性设置为例如：'http://testxxxxxx' 该组件查询所有用户的商店，并通过管道调用一个循环遍历每个人的方法，进行 api 调用以获取“blob”图像响应从 api，并使用人员的 imageUrl = 'blob:http:2fk2fjadkf' 和组件设置 <img src='imageUrl' 更新商店。

但是由于某种原因，外部 observable 内部的方法循环了很多次。不知道为什么。

这是我的代码：

零件：

peopleToShow$ = this.peopleFacade.peopleToShow$;

Component.html 使用 peopleToShow$ 和每个人的 imageUrl 属性。现在它没有采用在 this.loadImagesAsBlobs 中设置的更新的 blob url

正面：

  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);
  }

谢谢

4

1 回答 1

1

它不在这段代码中，但是当我遇到这个问题时，那是因为我有多个东西在监听一个 observable，这意味着这一切都发生了好几次。

修复，改变

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

至

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

或者shareReplay(1)，如果您担心在设置下游的所有内容之前会发出 peopleToShow$ ，请改用。

于 2021-06-18T17:28:01.733 回答