在 Angular 9 中，为什么我的订阅是顺序加载而不是并行加载？

Question

我正在使用Angular 9. 我想加载一系列对象，每个对象都有图像数据。我想先加载所有对象，然后再加载图像数据。我的 component.ts 文件中有这个 ngOnInit ...

  ngOnInit(): void {

    this.authService.getAllinLibrary().subscribe((res: any[]) => { 
      this.results = res;
      ...

      for (let i = 0; i < results.length; i++) {
        this.getTheImage(res[i].Id, i);
      }
    });



  getTheImage(imageId: number, index: number) {
    this.authService.getPersonImage(imageId).subscribe(data => {
      this.createImageFromBlob(data, index);
      this.isImageLoadingArr[index] = false;
      console.log("loaded image:" + index);
    }, error => {
      this.isImageLoadingArr[index] = false;
      console.log(error);
    });
  }

我像这样在我的组件中显示数据

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

                  <div class="image-background">
                      <img [src]="images[i]"
                        alt="" width="100%">

似乎所有加载图像数据的调用都没有运行同时进行。也就是说，每次，我都会收到日志消息

loaded image: 0
loaded image: 1
loaded image: 2
loaded image: 3
loaded image: 4
     ....

按顺序打印，让我相信调用不会同时执行。我如何修改我拥有的内容，以便同时执行获取图像源的调用，而不是一次执行一个？

Answer 1

我认为最好的方法是实现 forkJoin Rxjs 规范：

     this.authService.getAllinLibrary().subscribe((res: any[]) => { 
          this.results = res;
          ...
     let observableBatch = [];

  results .forEach(( componentarray, key ) => {
    observableBatch.push( this.getTheImage(res[key ].Id, key); );
  });
 

      const getImagesObservable= forkJoin(observableBatch );
       
    getImagesObservable.subscribe({
     next: value => your Implementation Here
     complete: () => console.log('This is how it ends!'),
    });

});

在 Angular 9 中，为什么我的订阅是顺序加载而不是并行加载？

In Angular 9, why are my subscriptions getting loaded sequentially instead of in parallel?

angular

ngfor

subscription