Блог

Внутри компонента есть переменная events:

  public readonly events$: Observable<IEvent[]>;
 

Данные поступают из службы:

 ngOnInit(): void {
     this.events$ = this.eventService.get()
}
 

Интересно, как отфильтровать данные, не являющиеся начальной мутацией this.events$ ?

Фильтр по текстовому полю:

 public textChanged(text: string) {
}
 

Фильтр по конкретному имени поля:

 public filterByField(field: string, value: string) {
}
 

Фильтр по дате:

 public onDateChanged(date: Date) {
  
}
 

Правильно ли я считаю, что нужная мне переменная содержит отфильтрованные данные?

   public filteredEvents$: Observable<IEvent[]>;
  this.filteredEvents$ = this.events$; // Set initial data without filters
 

Затем возвращать измененные данные в каждом методе в эту переменную this.filteredEvents$ ?

будут ли данные this.events$ изменены после this.filteredEvents$ внесения изменений? Потому что у него есть ссылочная ссылка this.filteredEvents$ = this.events$;

Вы можете добиться этого , просто используя pipe и filter .

Фильтр по текстовому полю:

 public textChanged(text: string) {
this.filteredEvents$ = this.events$.pipe(
  map(r => r.filter(q => q.textField === text))
 );
}
 

Фильтр по конкретному имени поля:

 public filterByField(field: string, value: any) {
this.filteredEvents$ = this.events$.pipe(
  map(r => r.filter(q => q[field] == value))
 );
}
 

Фильтр по дате:

 public onDateChanged(date: Date) {
 this.filteredEvents$ = this.events$.pipe(
   map(r => r.filter(q => q.dateField.getTime() == date.getTime()))
 );
}
 

Stackblitz