-1

I'm using Angular 9. I have the following component that displays a number of images

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

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

The images are loaded below using forkJoin. This accomplishes the goal of being able to load my images in parallel ...

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

The issue that I'm wondering about is that the images are only displayed when they are all loaded (all the calls complete). I was curious if there is a way to load the images in parallel but also display the images as each call completes.

Dave
  • 15,639
  • 133
  • 442
  • 830
  • 1
    Isn't that just *not* `forkJoin`ing? The point to using that is when you want a collection of all of the results once all are complete; if you don't, don't use it. I.e. go back to what you had [here](https://stackoverflow.com/q/64771410/3001761), it's not clear why that was a problem given the context in this question. – jonrsharpe Nov 10 '20 at 18:17

1 Answers1

0

You could use merge instead of forkJoin to get what you want.

import { merge } from 'rxjs';

  const getImagesObservable = merge(...images$); // spread the array of observables
  getImagesObservable.subscribe(result => {
      this.createTheImage(result, idx);
  });
AliF50
  • 16,947
  • 1
  • 21
  • 37