CODEWITHSUNDEEP
angularrxjs
RayKim
RayKim

Reputation: 433

combineLatest and async pipe

Edit some mis-typed

What i did

// in component
export class WhatIdidComponent implements OnInit {
  storeData$
  combine$;

  constructor(
      private store: Store<AppState>
      private route: ActivatedRoute,
  ) {
      this.storeData$ = this.store.pipe(select((state: AppState) => state['p']['reviews']), share());
      this.combine$ = combineLatest(
         //I inserted async storeData$ variable in combineLatest
         this.storeData$,
         this.route.params.pipe(/*any operator*/)
      )
  }
}

//d

//in template.html
<ng-container *ngIf="(storeData$ | async) as data; else loading">
     // not working properly when this.storeData$ is in combineLatest
     {{data.blah}}
</ng-container>

storeData$ with async pipe is not working when i insert this.storeData in combineLatest

I thought that this.storeData$ was nothing to do with combineLatest. because this.storeData$ is this.storeData$.

but it seemed to be related to combineLatest. Why? and How to solve this?

What i want is

  1. work properly with this.storeData and async pipe.

Thank you for reading

Upvotes: 1

Views: 3567

Answers (1)

ggradnig
ggradnig

Reputation: 14189

You are creating a multicast subject with share that subscribes to your source (this.store) as soon as you subscribe to your combineLatest observable. This causes so-called 'late subscribers' to miss the notification of the original observable. Late subscribers in this case are all other subscribers except for the first one, therefore also your async pipe.

Your choices are to either drop the share pipe to maintain a cold observable or use e.g. shareReplay(1) instead to create a caching behaviour.

Upvotes: 1

Related Questions