Angular MatTable自定义筛选下全局搜索框失效问题求助

我在使用Angular的MatTable组件时，已实现多列自定义筛选功能，但新增的全局文本搜索框无法正常工作，对应的applyFilter方法如下：

// 此筛选方法无法正常工作
applyFilter(event: Event) {
  const filtervalue = (event.target as HTMLInputElement).value
  this.dataSource.filter = filtervalue.trim().toLowerCase();
}

问题原因 #

由于已自定义多列筛选的filterPredicate，MatTable默认的全局筛选逻辑会被覆盖，直接设置dataSource.filter只会触发自定义的多列筛选规则，不会执行全局搜索。

解决步骤 #

需要将全局搜索逻辑整合到自定义的filterPredicate中，同时传递全局搜索值和多列筛选条件：

1. 定义全局搜索变量
   在组件类中添加存储全局搜索值的变量（同时保留多列筛选的原有变量）：

globalFilter: string = '';
// 示例多列筛选变量（根据你的实际业务调整）
statusFilter: string = '';
categoryFilter: string = '';

2. 更新filterPredicate逻辑
   修改自定义筛选规则，让它同时支持全局搜索和多列筛选：

this.dataSource.filterPredicate = (data: any, filter: string) => {
  // 解析合并后的筛选条件
  const filterConditions = JSON.parse(filter);
  
  // 全局搜索逻辑：匹配任意列的文本内容
  const isGlobalMatch = !filterConditions.global || Object.values(data).some(item => 
    item?.toString().toLowerCase().includes(filterConditions.global.toLowerCase())
  );

  // 原有多列筛选逻辑（根据你的实际筛选规则调整）
  const isColumnMatch = (!filterConditions.status || data.status.toLowerCase().includes(filterConditions.status.toLowerCase())) &&
                        (!filterConditions.category || data.category.toLowerCase().includes(filterConditions.category.toLowerCase()));

  // 需同时满足全局搜索和多列筛选条件才会被保留
  return isGlobalMatch && isColumnMatch;
};

3. 修改applyFilter方法
   将全局搜索框的输入值与多列筛选条件合并后，传递给数据源的filter属性：

applyFilter(event: Event) {
  this.globalFilter = (event.target as HTMLInputElement).value.trim().toLowerCase();
  // 合并所有筛选条件并转为字符串格式
  this.dataSource.filter = JSON.stringify({
    global: this.globalFilter,
    status: this.statusFilter,
    category: this.categoryFilter
  });
}

说明 #

MatTable的filterPredicate是筛选规则的核心载体，设置dataSource.filter时，该值会作为第二个参数传入filterPredicate。整合全局搜索与多列筛选的关键，就是把两种筛选条件合并为一个对象传递，再在filterPredicate中分别校验两种条件是否满足。

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