Как добавить несколько значений фильтра в таблицу материалов angular?

Question

Я работаю над таблицей материалов angular, которую следует фильтровать по выбранным элементам из поля mat-select. Он работает нормально, когда у меня есть обычное поле выбора, где пользователь может выбрать только один элемент.

Но проблема заключается в том, что у меня это окно с несколькими вариантами выбора, где пользователь может выбрать более одного фильтра.

Multiselect хранит выбранные элементы в массиве. Как передать его в источник данных таблицы?

applyFilter() {
   console.log(this.selection); 
   this.dataSource.filter = this.selection.trim().toLowerCase() 
 }

Как передать массив значений фильтра?

Демонстрация Stackblitz

Answer 1

Вы можете перезаписать datasource.filterPredicate с помощью пользовательской логики фильтра c.

// array containing the selected options
selection: any[];

ngOnInit() {
  this.dataSource.filterPredicate = (userData: UserData, filter: string) => {
    // return true if the userData should be displayed
    return this.selection.length > 0 
      ? this.selection.some(version => version == data.version)
      : true;
  }
}

applyFilter() {
  // we don't use the filter value in filterPredicate and just pass some value here
  // to trigger the filter (there might be better options)
  this.dataSource.filter = 'only used to trigger filter';
}

https://stackblitz.com/edit/angular-7w9ajc-koib2f