如何将多个过滤器值添加到 angular material table？

Question

我正在处理 angular material table，应该根据 mat-select 框中的 selected 项目进行过滤。当我有普通的 select 框时，它工作正常，用户可以 select 只有一个项目。

但问题是我将其设置为多 select 框，用户可以在其中 select 多个过滤器。

Multiselect 将 selected 项存储在一个数组中。如何将它传递给 table 数据源？

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

如何传递过滤器值数组？

Stackblitz demo

Answer 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

如何将多个过滤器值添加到 angular material table？

how to add multiple filter values to angular material table?

angular

angular-material

angular-material-table