在ngrx中订阅内管道

Question

I have a selector that takes a parameter to filter values.

The parameter depends on an observable's return.

export class LineSynopticComponent implements OnInit, AfterViewInit {

schedules$: Observable<ISchedule[]>;

ngOninit(){
  this.selectedDate$.subscribe(elm => {
  this.schedules$ = this.store.pipe(select(selectSchedulingsTimes, { time: elm.timeSelect }));
});
}

the selectSchedulingsTimes selector is defined as well:

const schedulings = (state: IAppState) => state.schedulings;

export const selectSchedulingsTimes = createSelector(
  schedulings,
  (state: ISchedulesState, { time }: { time: string }) => {
    let nowFormat = moment(time, 'HH:mm');
    return state.schedulings.data.filter(elm => {
      ... 
      return elm
    });
  }
);

in a second time I subscribe to schedules$

this.schedules$.subscribe((schedules: ISchedule[]) => {

  ...

}

I get inside selectSchedulingsTimes selector only once when application is started, but when I change values of selectedDate$ the selector is not triggered so I'm not entering in selectSchedulingsTimes .

How can I make selector send new data every change on selectedDate ?

Is it because I'm not subscribing to schedules$ ?

Don't hesitate to ask me for unclear parts

Answer 1

Let's change your observable setup like this:

ngOninit(){

    this.selectedData$.pipe(
      switchMap((elm) => {
        return this.store.pipe(select(selectSchedulingsTimes, { time: elm.timeSelect }));
      })
    ).subscribe((resposeFromStore) => {
      //Do whatever you want tot do with the store value
      console.log(resposeFromStore);      
    })    
  }

You need not subscribe on selectedData$ and then set up your other observable. Hope it helps.

Answer 2

I think your selector is the problem. You should read this , its giving some good example and it also contains a section regarding dynamic parameters. Thats what I would try:

export const selectSchedulingsTimes = createSelector(
  schedulings,
  schedule => (time: string) => {
    let nowFormat = moment(time, 'HH:mm');
    return state.schedulings.data.filter(elm => {
      ... 
      return elm
    });
  }
);