Angular 4中Filter Pipe使用问题：无法筛选嵌套数组内容

我明白你的问题啦——你的Search Pipe目前只能处理顶层的简单属性（比如用户的name和email），没法深入到嵌套的对象（比如outlet）或者数组（比如roles）里去匹配内容。咱们来修改一下Pipe，让它能递归遍历所有嵌套的属性，这样就能支持筛选Outlet名称、地址和Role名称了。

原代码的问题分析 #

你的原始Pipe在遍历属性时，遇到outlet这种对象类型的属性，直接调用toString()会返回[object Object]，自然没法匹配到里面的name或address；而roles是数组，toString()只会把数组元素转成拼接字符串，也没法正确检查每个role的name属性。

修改后的Search Pipe代码 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'search' })
export class SearchPipe implements PipeTransform {
  transform(items: any[], term: string): any[] {
    // 如果搜索词为空，直接返回原数组
    if (!term || !items) return items;

    const lowerCaseTerm = term.toLowerCase();

    // 递归检查当前值是否匹配搜索词
    const checkMatch = (value: any): boolean => {
      // 处理null/undefined的情况
      if (value == null) return false;

      // 如果是字符串或数字，直接转小写匹配
      if (typeof value === 'string' || typeof value === 'number') {
        return value.toString().toLowerCase().includes(lowerCaseTerm);
      }

      // 如果是数组，遍历每个元素检查是否有匹配
      if (Array.isArray(value)) {
        return value.some(item => checkMatch(item));
      }

      // 如果是对象，遍历所有属性递归检查
      if (typeof value === 'object') {
        return Object.values(value).some(propValue => checkMatch(propValue));
      }

      return false;
    };

    // 过滤出所有匹配的项
    return items.filter(item => checkMatch(item));
  }
}

代码说明 #

1. 递归匹配函数checkMatch：这是核心部分，它会处理所有类型的数据：
   • 简单类型（字符串/数字）：直接转小写后检查是否包含搜索词
   • 数组：遍历数组中的每个元素，只要有一个元素匹配就返回true
   • 对象：遍历对象的所有属性值，递归检查每个属性是否匹配
   • null/undefined：直接返回false避免报错
2. 统一处理搜索词：提前把搜索词转成小写，避免大小写敏感的问题
3. 边界处理：当items为空或term为空时，直接返回原数组，避免不必要的计算

使用示例 #

在你的模板里可以像之前一样使用这个Pipe，现在它已经支持嵌套属性的筛选了：

<input type="text" [(ngModel)]="searchTerm" placeholder="搜索用户、门店或角色...">
<div *ngFor="let user of users | search: searchTerm">
  <h3>{{user.name}} ({{user.email}})</h3>
  <p>门店：{{user.outlet.name}} - {{user.outlet.address}}</p>
  <p>角色：{{user.roles.map(role => role.name).join(', ')}}</p>
</div>

现在你输入"Sarawak"就能匹配到对应的用户，输入"Admin"也能同时匹配用户名称和角色名称啦！

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