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.
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.