如何将多个过滤器值添加到角度材料表？

【问题标题】：how to add multiple filter values to angular material table?如何将多个过滤器值添加到角度材料表？
【发布时间】：2020-04-09 13:37:39
【问题描述】：

我正在研究角度材料表，该表应根据mat-select 框中的选定项目进行过滤。当我有普通的选择框时，它工作正常，用户只能选择一项。

但问题是我将它作为多选框，用户可以选择多个过滤器。

多选将选定的项目存储在一个数组中。如何将其传递给表数据源？

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

如何传递过滤器值数组？

Stackblitz demo

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

您可以使用自定义过滤逻辑覆盖datasource.filterPredicate。

// 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

【讨论】：