Angular Material带过滤表格：如何用空格拼接对象值实现多词过滤？

我明白你遇到的痛点——官方默认的行数据归约函数是把所有字段值拼接成一个小写长串，输入空格时相当于要匹配包含这个空格组合的完整子串，自然找不到符合多关键词的结果。要实现空格分隔的多关键词过滤，你只需要修改过滤逻辑，让它能逐个检查每个关键词是否存在于行数据中。

1. 先搞懂默认逻辑的问题 #

官方示例里的过滤函数大概长这样：

private _filterPredicate(data: YourDataType, filter: string): boolean {
  const dataStr = Object.keys(data).reduce((acc, key) => acc + data[key].toLowerCase() + ' ', '').trim();
  const searchStr = filter.toLowerCase();
  return dataStr.includes(searchStr);
}

这个逻辑是把行内所有字段的值揉成一个长字符串，然后判断过滤文本是不是这个长串的子串。比如你输入"foo bar"，它会去找包含"foo bar"连续字符的行，而不是同时包含foo和bar的行——这就是空格输入后无匹配的原因。

2. 改成多关键词匹配的过滤函数 #

你可以把过滤文本按空格拆成多个关键词，然后确保每一个关键词都能在行数据的某个字段里找到。修改后的函数示例如下：

private _filterPredicate(data: YourDataType, filter: string): boolean {
  // 按空格拆分关键词，同时过滤掉空字符串（比如输入连续空格的情况）
  const keywords = filter.toLowerCase().split(' ').filter(word => word.trim().length > 0);
  
  // 如果没输入有效关键词，直接返回true（显示所有行）
  if (keywords.length === 0) return true;

  // 把行里所有字段的值转成小写字符串，存在数组里
  const dataValues = Object.keys(data).map(key => data[key].toString().toLowerCase());

  // 检查每个关键词是否至少在一个字段中存在
  return keywords.every(keyword => 
    dataValues.some(value => value.includes(keyword))
  );
}

3. 把自定义函数绑定到数据源 #

在你的表格数据源配置中，把这个自定义的_filterPredicate赋值给filterPredicate属性就行：

this.dataSource.filterPredicate = this._filterPredicate.bind(this);

4. 可选的优化小技巧 #

• 指定过滤字段：如果你不想在所有字段里搜索，只想针对name、email这类特定字段，可以把Object.keys(data)改成指定字段数组，比如['name', 'email']。
• 处理精确匹配：如果需要关键词和字段值完全匹配（而不是包含），把value.includes(keyword)改成value === keyword就行。
• 忽略大小写：上面的代码已经统一转成小写，确保大小写不敏感的匹配，如果你需要区分大小写，去掉.toLowerCase()即可。

这样修改后，输入空格分隔的多个关键词，表格就会只显示包含所有关键词的行啦~

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