Question

我目前在订阅中遇到多个/ forEach的问题，我试图检索对象列表，然后借助其ID检索图像。目前，我已经做到了：

this.appTypeService.get().pipe(
  map((apps: AppTypeEntity[]) => {
    return apps.map((app) => new AppTypeEntity(app));
  })
).subscribe((apps: AppTypeEntity[]) => {
  apps.forEach((app: AppTypeEntity) => {
    if (app.Logo != null) {
      this.appTypeService.getPhoto(app.Id).subscribe((image: string) => {
        app.Image = image;
      });
    }
  });
  this.appTypeList = apps;
});

问题在于，由于有时执行顺序不正确，因此列表中的对象图像将为空。我想要获取所有图像，然后设置this.appTypeList。

这是我的getPhoto，以防万一：

  public fileReader(blob: Blob): Observable<string> {
    return Observable.create((obs: Observer<string | ArrayBuffer>) => {
      const reader = new FileReader();

      reader.onerror = err => obs.error(err);
      reader.onabort = err => obs.error(err);
      reader.onload = () => obs.next(reader.result);
      reader.onloadend = () => obs.complete();

      return reader.readAsDataURL(blob);
    });
  }

  public getPhoto(id: string): Observable<string> {
    return this.httpClient.get(`${this.environment.get('webServiceUrl')}/photos/${id}/${this.endpoint.slice(0, -1)}/min`, { responseType: "blob" as "json" }).pipe(
      mergeMap((blob: Blob) => this.fileReader(blob))
    );
  }

我不知道该怎么做？我调查了forkJoin，但找不到适合自己情况的正确方法。

Answer 1

由于您已经了解了forkJoin的用法，因此您在正确的方向上。

RxJS的forkJoin()将在返回所有可观察值之前完成Array.forEach()循环。如果您熟悉JavaScript中Promises的用法，它实际上类似于Promise.all。

const observablesList = [];

apps.forEach(app => {
  observablesList.push(this.appTypeService.getPhoto(app.Id));
})

forkJoin(observablesList).subscribe(response => {
  console.log(response);
  // handle the rest
});

订阅循环内的订阅？

1 个答案: