Angular自定义搜索管道含空格时无法过滤部分数据的问题

你的问题出在关键词带空格时，第一种数据结构的字段值没有包含空格，而JSON.stringify(item)生成的字符串里也不存在这个带空格的子串，而第二种结构的Name字段本身包含空格，所以能匹配到。同时原代码存在冗余判断，且用JSON.stringify做匹配的方式不够精准，会引入对象的键、括号等无关字符。

修复后的管道实现 #

transform(value: any[], args?: string): any[] {
  // 处理空数据或空数组
  if (!value || value.length === 0) return [];
  // 无过滤关键词时返回原数据
  if (!args) return value;

  // 去除关键词首尾空格并统一转小写
  const processedKeyword = args.trim().toLowerCase();
  // 处理后关键词为空的情况
  if (!processedKeyword) return value;

  return value.filter(item => {
    // 提取对象所有值，转小写后拼接成连续文本
    const combinedText = Object.values(item)
      .map(val => val?.toString().toLowerCase())
      .join(' ');
    // 判断拼接文本是否包含目标关键词
    return combinedText.includes(processedKeyword);
  });
}

关键优化点 #

1. 关键词预处理：用trim()去除首尾空格，解决输入带空格的匹配问题，比如Ashish 会被处理成Ashish，能匹配第一种结构的FirstName值。
2. 精准文本拼接：不再用JSON.stringify，而是提取对象所有字段值拼接成字符串，两种数据结构都会被转换成统一格式的文本（第一种变成ashish kumar，第二种也是ashish kumar），保证匹配逻辑一致。
3. 空值安全处理：用val?.toString()避免字段值为null/undefined时的报错。
4. 冗余代码清理：去掉重复的!value和!args判断，逻辑更清晰。

测试验证 #

• 输入Ashish （带末尾空格）：处理后关键词为ashish，两种数据结构的拼接文本都包含该子串，均可匹配。
• 输入Ashish Kumar：两种结构的拼接文本都完全包含该字符串，均可匹配。
• 输入Kumar：两种结构的拼接文本均包含该关键词，均可匹配。

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