Angular Material Table按fullName过滤返回不匹配结果问题咨询

问题根因 #

1. 代码变量赋值错误：你对搜索关键词做的去空格、转小写处理完全没有生效。代码中你将处理后的值赋值给了filterValue变量，但最终传给this.dataSource.filter的是未处理的原始输入值data，相当于前面的处理逻辑白写了。
2. Material Table默认过滤逻辑不符合需求：Angular Material Table默认的filterPredicate会把数据对象所有字段的取值转成字符串拼接后做全局匹配，只要任意字段包含搜索关键词就会命中。你遇到的搜ro返回user two的情况，就是user two的其他字段（比如邮箱、ID、公司名等）包含ro，被默认逻辑匹配到了，而且默认逻辑本身不支持优先匹配fullName字段的规则。

解决步骤 #

1. 先修复关键词处理的赋值错误 #

修改applyFilter方法，确保传给数据源的是处理后的关键词：

applyFilter(event: any) {
  let filterValue = event.target.value;
  // 处理后的值直接赋值给filter
  filterValue = filterValue.trim().toLowerCase();
  this.dataSource.filter = filterValue;
}

2. 自定义过滤逻辑实现指定字段匹配+fullName优先 #

在你初始化dataSource的位置（一般是ngOnInit钩子，或者拿到列表数据之后），重写数据源的filterPredicate，可以根据你的需求调整匹配逻辑：

// 初始化dataSource后添加这段代码
this.dataSource.filterPredicate = (data: any, filter: string) => {
  // 优先检查fullName是否匹配
  const fullNameMatch = data.fullName?.toLowerCase().includes(filter);
  // 按你的输入框提示，补充公司、标题的匹配逻辑，不需要可以删掉
  const companyMatch = data.company?.toLowerCase().includes(filter);
  const titleMatch = data.title?.toLowerCase().includes(filter);
  
  // 如果只需要fullName匹配的结果，直接return fullNameMatch即可
  return fullNameMatch || companyMatch || titleMatch;
};

// 如果需要实现fullName匹配的条目排在搜索结果最前面，可以补充排序逻辑
this.dataSource.filteredData.sort((a, b) => {
  const aPriority = a.fullName?.toLowerCase().includes(this.dataSource.filter) ? 0 : 1;
  const bPriority = b.fullName?.toLowerCase().includes(this.dataSource.filter) ? 0 : 1;
  return aPriority - bPriority;
});

修改后过滤逻辑只会命中你指定的字段，不会再出现无关条目，同时可以满足fullName优先的需求。

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