RxJS pipe Finalize operator called before Observable completed

Question

I am going to get the user list after updating their detailed information.
First, I updated user detailed information using this.mediaService.updateImports(): Observable<any>
Second, I tried to display the updated user detailed information using this.getUserList();
By the way, this.getUserList() didn't show the updated user List.
The updated user list was shown when I use setTimeout(() => { this.getUserList(); }, 3000); instead of this.getUserList();
Also, the updated user list was shown when I call this.getUserList() after a few seconds later.

this.mediaService.updateImports(
  this.momentService.momentId,
  this.momentService.moduleItemId,
  doc
).pipe(
  finalize(() => {
    this.getUserList();
    // setTimeout(() => { this.getUserList(); }, 3000);
  })
).subscribe();

Could you please let me know how can I display the updated user list as soon as it is updated?

Kind regards, Jie Li.

`function getUserList() { this.guestsService.getReleations().subscribe((data: ReleationUser[]) => { this.dataSource.data = data; }); }` — , May 20 '21 at 03:03
If using `setTimeout()` helped then the change wasn't detected by Angular's change detection. See this https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular — martin, May 20 '21 at 07:09

score 0 · Answer 1 · answered May 20 '21 at 07:43

Instead of the multiple subscriptions, you'd need to use a higher order mapping operator like switchMap to map from one observable to another here. The finalize operator is better suited for side-effects like adjusting the loading status.

this.mediaService.updateImports(
  this.momentService.momentId,
  this.momentService.moduleItemId,
  doc
).pipe(
  switchMap(() => this.guestsService.getReleations())
).subscribe(
  (data: ReleationUser[]) => this.dataSource.data = data,
  (error: any) => console.log(error)
);

I already tried this method but didn't work. Is there any other way? — , May 20 '21 at 11:54

RxJS pipe Finalize operator called before Observable completed

1 Answers1