Angular Material复选框无法过滤Mat Table 终端与控制台无报错

现有代码的核心冲突点 #

• 存在两套完全独立、互相干扰的过滤逻辑，最终导致筛选结果不符合预期
  • 一套是在ngOnInit中直接调用filterOptions手动过滤，直接替换dataSource.data为筛选结果；
  • 另一套是编写了customFilterPredicate自定义过滤规则，但从未将规则绑定到MatTableDataSource实例上，完全没有生效。
• 手动过滤逻辑的参数判断、匹配规则存在多处错误：
  • nameValue声明为数组类型，但代码中直接对数组调用toString()方法，多选中选项会被拼接为带逗号的字符串（如选中两个值时会变成"value1,value2"），代码反过来用单个字段值去匹配拼接后的长字符串，永远无法命中结果；
  • 匹配逻辑混用了或（||）、与（&&）判断：filterOptions中两个筛选条件用或逻辑连接，自定义谓词中用与逻辑连接，规则完全不统一；
  • 空值判断逻辑缺失：当筛选器为空数组时，原判断条件!nameValue无法识别空数组（空数组的布尔值为true，!nameValue为false），导致空值状态下依然进入过滤流程；
  • 手动替换dataSource.data会破坏数据源结构，后续排序、分页、内置过滤的联动逻辑会全部失效。
• applyFilter方法存在冗余赋值：连续两次给dataSource.filter赋值，第一次设置的小写格式化结果会被第二次的原始值直接覆盖，格式化逻辑完全失效。

修复实现步骤 #

1. 统一使用MatTableDataSource内置过滤机制，避免直接修改数据源内容
   在数据源初始化完成后，绑定自定义的过滤谓词，替代默认的全字段匹配逻辑：

   // 数据源初始化位置添加绑定逻辑
   this.dataSource.filterPredicate = this.customFilterPredicate();
   

2. 修正自定义过滤谓词的逻辑，适配复选框多选场景
   替换原来的单值匹配逻辑，支持多选项匹配，空选项代表不触发对应维度的筛选：

   customFilterPredicate() { 
     return (data: ITransactionDetail, filter: string): boolean => { 
       const searchString = JSON.parse(filter); 
       // id维度：选中任意一个匹配id即命中，无选中值时默认通过
       const matchId = searchString.position?.length 
         ? searchString.position.some(selectedId => data.id.toString() === selectedId)
         : true;
       // 交易类型维度：选中任意一个匹配类型即命中，无选中值时默认通过
       const matchType = searchString.transactionType?.length
         ? searchString.transactionType.some(type => data.transactionType.toLowerCase() === type.toLowerCase())
         : true;
       // 两个维度同时满足才展示数据
       return matchId && matchType;
     }; 
   }
   

3. 改造ngOnInit中的筛选订阅逻辑
   不再直接修改dataSource.data，而是把两个筛选器的选中值序列化后赋值给dataSource.filter，触发内置过滤逻辑，避免全量数据被覆盖：

   // 引入combineLatest操作符，合并两个筛选器的状态流
   import { combineLatest } from 'rxjs';
   
   ngOnInit(){ 
     combineLatest([
       this.positionFilter.valueChanges,
       this.nameFilter.valueChanges
     ]).subscribe(([positionValue, nameValue]) => {
       // 构造统一的过滤条件载荷
       const filterPayload = {
         position: positionValue || [],
         transactionType: nameValue || []
       };
       this.dataSource.filter = JSON.stringify(filterPayload);
     }); 
   }
   

4. 清理冗余代码
   删除原来的手动过滤方法filterOptions，修正applyFilter的冗余赋值问题：

   applyFilter(filterValue: string) { 
     // 移除重复赋值的冗余逻辑，保留一次有效赋值即可
     this.dataSource.filter = filterValue.trim().toLowerCase(); 
   }
   

额外注意事项 #

• 原HTML片段中仅展示了数据渲染逻辑，需要确保复选框的表单控件实例正确关联到positionFilter、nameFilter，否则订阅事件无法正常触发。
• 修复后不要在其他位置给dataSource.data赋值非全量的筛选结果，否则会破坏内置过滤机制的运行逻辑。

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