Subscribe to all observables in a combineLatest

Question

In my code I open a matDialog allowing XLSX extraction.

When opening this matDialog, data is loaded into the ngOnInit(), which may take some time. That's why I use combineLatest() with filter() allowing me to wait for the result of the three queries to allow extraction. I would now like to add a mat-progress-bar determinate to see where the extraction is going. For that I would like to be able to modify my varibale progress with each result received.

So I used map(result => {this.progress = this.progress + 30;} on each request to increase the progress. It works, but breaks my combineLatest(). The progression stops at 90% and I can not find a solution.

Code:

this.subscriptions$.add(combineLatest([
    this.storeWallets.loadInvoiceExtractionProduct(this.selectedWallet).pipe(
        //map(result => { this.progress = this.progress + 30; }),
        catchError(err => {
            console.error(err.message);
            return of(err);
        })
    ),
    this.storeWallets.loadInvoiceExtractionSupport(this.selectedWallet).pipe(
        //map(result => { this.progress = this.progress + 30; }),
        catchError(err => {
            console.error(err.message);
            return of(err);
        })
    ),
    this.storeWallets.loadInvoiceExtractionTraining(this.selectedWallet).pipe(
        //map(result => { this.progress = this.progress + 30; }),
        catchError(err => {
            console.error(err.message);
            return of(err);
        })
    ),
    ]).pipe(
        filter(results => results.every(res => !!res))
    ).subscribe(results => {
        //this.progress = 100;
        document.body.style.cursor = "default";
        this.waitExtraction = false;
    })
);

Thanks for your help.

score 2 · Accepted Answer · answered Sep 23 '19 at 08:42

This line:

map(result => { this.progress = this.progress + 30; }),

will take every result and return undefined, as there's no return statement (therefore filter will filter out the results, and the subscriber won't be run). Replace map with tap operator and it should work.

Subscribe to all observables in a combineLatest

1 Answers1