0

I am trying to clear an observable that contains data which will be shown in a table. Currently I have an input$ observable that combines the latest data like so:

this.inputs$ = observableCombineLatest(
      this.paymentDates$,
      ...
      this.reassessmentDate$,
      (
        paymentDates,
        ...
        reassessmentDate,
      ) => ({
        paymentDates,
       ...
        reassessmentDate,
      }),
    ).pipe(debounceTime(500));

Once each value has been recieved it will trigger another observable setting the data it needs for the table:

this.transactionSummary$ = this.inputs$
      .pipe(
        map(this.mapDataForTransactionSummary, this),
        share(),
      )
      .pipe(
        mergeMap(data => {
          debugger;
          return this.taxService.getTransactionSummary(data);
        }),
      )
      .pipe(
        tap(this.transactionSummaryEmitter),
        map(this.calculateComputedValues),
        share(),
      );

The html that determines displaying it is as follows:

<div *ngIf="(transactionSummary$ | async) as summaryData; else loading">

Now when the table first loads it works fine no problem but If i say select a new user in this case and reload the table it will contain the data form the previous user and will after a couple of seconds update with the new data, however I dont want to show the old data and would rather it not show while the new data comes through.

So my solution to this was simply adding a tap to the inputs$ observable and set the transactionSummary$ to null,

.pipe(tap(() => {
      this.transactionSummary$ = null;
    }), debounceTime(500));

however this doesnt work at all, just doesn't load the table. Any ideas why that might be?

JvB
  • 297
  • 4
  • 17
  • https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular – martin Jul 26 '19 at 10:50
  • So I think the main issue is that you're assigning `this.transactionSummary$` to be `null` and thus overriding the whole `this.transactionSummary$ = this.inputs$.pipe(...)`. So even if you had more streams of data from `inputs$`, they won't be piped to `transactionSummary$`. – Andy Jul 26 '19 at 11:01
  • @Andy I have a debounce of 500ms, which shoudl be ample, my debugger inside of where `trannsactionSummary$ ` is set is only hit once and thats after everything in `inputs$` are set – JvB Jul 26 '19 at 11:04
  • @JvB You mentioned that you are adding a tap to set `transactionSummary$ = null`. This is going to remove your previous definition of `this.transactionSummary$ = this.inputs$.pipe(...)`. You could probably use a `Subject` for your `transactionSummary$` to emit data using a subscription from `inputs$`. – Andy Jul 26 '19 at 11:12

1 Answers1

1

Just carrying on from my comments. To resolve your issue using the proposed solution that you had in mind. You could do something like the following.

Have transaction summary be a Subject or BehaviorSubject. More details in the rxjs page: http://reactivex.io/rxjs/manual/overview.html

this.transactionSummary$ = new Subject()

Then when you're initializing the component you can subscribe to $inputs.

this.inputs$
  .pipe(
    ...do your magic
  )
  .subscribe(data => this.transactionSummary$.next(data));

After, whenever your 'selecting a new user', you can go this.transactionSummary$.next(null).

Andy
  • 79
  • 1
  • 4