Angular Material表格多条件组合过滤时，年份叠加姓名/LRN筛选失效如何解决

当前实现的失效问题完全来自MatTableDataSource的固有设计逻辑：

• 数据源全局仅提供一个filter存储字段、一个filterPredicate过滤谓词。你每次调用不同的过滤方法时，都会直接覆盖之前存的过滤值、替换掉之前的过滤逻辑：比如先输入年份完成过滤，此时filter存的是年份匹配值、谓词是校验日期的逻辑，等你再输入姓名时，filter被替换成姓名值、谓词被替换成校验姓名的逻辑，之前的年份过滤条件就被完全丢弃，自然无法实现叠加效果。
• 原代码中filterPredicate使用普通function声明，回调执行时会丢失组件上下文，本身也不支持扩展多条件校验。

实现多条件叠加过滤的核心逻辑是：不要把多个过滤条件塞到dataSource的单一filter字段里，而是在组件本地维护所有维度的过滤值，全局统一一套过滤校验规则。具体调整如下：

1. 组件逻辑（.ts文件）改造 #

• 在组件类中新增3个属性，分别存储姓名、LRN、年份三个维度的过滤值
• 全局仅在组件初始化时设置一次filterPredicate，使用箭头函数保证回调内可以正常访问组件实例，谓词逻辑中同时校验三个维度的过滤条件，全部满足才判定为匹配
• 各个过滤方法不再修改filterPredicate，仅更新对应维度的过滤值，最后触发一次数据源重新刷新即可
  改造后的代码片段：

// 本地存储各维度的过滤值
nameFilterValue = '';
lrnFilterValue = '';
yearFilterValue = '';

ngOnInit() {
  // 全局仅设置一次过滤谓词，不再在各个过滤方法中反复覆盖
  this.dataSource.filterPredicate = (data, _) => {
    // 空值代表该维度无过滤要求，非空则校验文本包含关系
    const matchName = !this.nameFilterValue 
      || data.fullName.toLocaleLowerCase().includes(this.nameFilterValue);
    const matchLrn = !this.lrnFilterValue 
      || data.lrn.toLocaleLowerCase().includes(this.lrnFilterValue);
    const matchYear = !this.yearFilterValue 
      || data.date.toLocaleLowerCase().includes(this.yearFilterValue);
    // 所有条件为“与”关系，全部匹配才返回true
    return matchName && matchLrn && matchYear;
  }
}

filterFullName(value: string): void {
  this.nameFilterValue = value.trim().toLocaleLowerCase();
  this.triggerDataSourceRefresh();
}

filterLrn(value: string): void {
  this.lrnFilterValue = value.trim().toLocaleLowerCase();
  this.triggerDataSourceRefresh();
}

filterYear(value: string): void {
  this.yearFilterValue = value.trim().toLocaleLowerCase();
  this.triggerDataSourceRefresh();
}

// 抽离公共的数据源刷新逻辑
private triggerDataSourceRefresh() {
  // 只要dataSource.filter值发生变化，就会触发重新过滤，这里赋值非空的任意标识值即可
  this.dataSource.filter = Date.now().toString();
}

2. 模板（.html文件）微调 #

原有模板逻辑基本可用，仅需删掉LRN输入框上多余的(click)='lrn = true' 冗余代码（这个输入框本身就是lrn === true为真时才会渲染，点击时本来就满足条件，该事件无实际作用）。

调整后无论用户先输入年份、再输入姓名/LRN，还是反过来先输入检索内容再选年份，所有过滤条件都会被保留、同时生效，不会出现切换过滤类型时丢失之前设置条件的问题。

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