在 Angular 9 中，我可以调整 forkJoin 以便在收到结果时对其进行处理吗？

Question

我正在使用 Angular 9. 我有以下显示大量图像的组件

                    <mat-grid-tile *ngFor="let person of pageData; let i = index;" class="animated flipInX">

...
                          <img [src]="images[i]"
                            alt="" width="100%">

下面使用 forkJoin 加载图像。这实现了能够并行加载我的图像的目标...

  let images$ = [];
  res.forEach(( componentarray, key ) => {
    images$.push( 
      this.authService.getImage(res[key].Id)
    );
  });
  const getImagesObservable = forkJoin(images$);
  getImagesObservable.subscribe(results => {
    results.forEach(( result, idx ) => {
      this.createTheImage(result, idx);
    })     
  });
});

我想知道的问题是图片只有在全部加载完毕（所有调用完成）后才会显示。我很好奇是否有一种方法可以并行加载图像并且在每次调用完成时显示图像。

Answer 1

您可以使用 merge 而不是 forkJoin 来获得您想要的。

import { merge } from 'rxjs';

  const getImagesObservable = merge(...images$); // spread the array of observables
  getImagesObservable.subscribe(result => {
      this.createTheImage(result, idx);
  });

在 Angular 9 中，我可以调整 forkJoin 以便在收到结果时对其进行处理吗？

In Angular 9, can I adjust forkJoin so that results are processed as they are received?

angular

observable

fork-join