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

问题描述

我正在使用Angular9。我具有以下组件，该组件可以显示大量图像

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

我想知道的问题是图像仅在它们全部加载时显示（所有调用完成）。我很好奇是否有一种方法可以并行加载图像，但在每次调用完成时也可以显示图像。

解决方法

您可以使用merge代替forkJoin来获取想要的东西。

import { merge } from 'rxjs';

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