如何为Angular Material表格传入多选筛选值实现过滤？

很常见的场景！你之前的代码是针对单选筛选写的，直接把选中值当成字符串处理，但多选时this.selection是数组，默认的表格过滤逻辑肯定不适用——得自定义filterPredicate来处理数组匹配逻辑。

下面是具体的解决步骤：

1. 自定义过滤逻辑（filterPredicate） #

Angular Material的MatTableDataSource允许你通过filterPredicate定义自己的过滤规则，这个函数会接收每一行数据和过滤值，返回true（保留该行）或false（过滤掉该行）。

首先在组件的ngOnInit里初始化这个逻辑（假设你的表格数据是类似{ id: number, name: string, category: string }的结构，筛选的是category字段）：

ngOnInit() {
  this.dataSource.filterPredicate = (data: YourDataType, filter: string) => {
    // 把过滤值（JSON字符串）转回数组
    const selectedFilters = JSON.parse(filter) as string[];
    
    // 如果没有选中任何筛选条件，直接返回所有数据
    if (selectedFilters.length === 0) return true;
    
    // 判断当前行的目标字段是否在选中的筛选数组中
    // 这里可以根据需求加忽略大小写的处理
    return selectedFilters.some(filterItem => 
      data.category.toLowerCase() === filterItem.toLowerCase()
    );
  };
}

2. 修改applyFilter方法 #

因为MatTableDataSource的filter属性默认是字符串类型，所以我们把多选数组转成JSON字符串传递，这样就能在上面的过滤逻辑里解析使用了：

applyFilter() {
  // 将选中的筛选数组转为JSON字符串，传入表格的filter
  this.dataSource.filter = JSON.stringify(this.selection);
}

3. 模板里的多选框配置 #

确保你的mat-select绑定了多选值，并且在选中变化时触发过滤：

<mat-form-field>
  <mat-label>筛选条件</mat-label>
  <mat-select [(value)]="selection" multiple (selectionChange)="applyFilter()">
    <mat-option *ngFor="let option of filterOptions" [value]="option">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

关键注意点 #

• 空数组处理：当用户没有选中任何选项时，要确保表格显示所有数据，这个逻辑已经写在filterPredicate里了。
• 类型匹配：如果你的筛选值和数据字段类型不一致（比如数字和字符串），记得在过滤时做类型转换。
• 实时过滤：通过(selectionChange)事件绑定applyFilter()，用户每选一个选项都会自动触发过滤，体验更流畅。

这样修改后，多选筛选的逻辑就完全正常工作了——表格会只显示那些目标字段匹配选中数组中任意一项的行。

内容的提问来源于stack exchange，提问作者IamGrooot