Angular中ng-model与filter：嵌套数据与顶层数据过滤问题

这种嵌套数据的过滤场景在Angular开发里真的很常见！我猜你用的普通filter管道只处理了顶层对象的属性，完全没触达底层的子数组，导致顶层数据匹配时能正常过滤，但嵌套数组里的内容匹配时就没效果，对吧？下面给你两种实用的解决方案：

方案一：自定义支持嵌套过滤的DeepFilter管道 #

如果还是想用管道的方式，我们可以写一个能递归检查嵌套数组的自定义管道，让它同时匹配顶层属性和子数组内容：

1. 实现自定义管道 #

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

@Pipe({ 
  name: 'deepFilter',
  pure: false // 如果数据是动态变化的，需要设置为非纯管道
})
export class DeepFilterPipe implements PipeTransform {
  transform(items: any[], filterText: string, nestedArrayKey: string): any[] {
    // 没有过滤条件或数据时直接返回原数据
    if (!items || !filterText) return items;
    
    const lowerFilter = filterText.toLowerCase();

    return items.filter(item => {
      // 检查顶层对象的所有属性是否匹配
      const isTopMatched = Object.values(item).some(value => 
        value?.toString().toLowerCase().includes(lowerFilter)
      );

      // 检查嵌套数组的每个元素是否匹配
      const isNestedMatched = item[nestedArrayKey]?.some(nestedItem => 
        Object.values(nestedItem).some(nestedValue => 
          nestedValue?.toString().toLowerCase().includes(lowerFilter)
        )
      );

      // 只要顶层或嵌套有一个匹配就保留
      return isTopMatched || isNestedMatched;
    });
  }
}

2. 在模板中使用管道 #

别忘了先在模块里声明这个管道！然后在模板里这样用：

<input type="text" [(ngModel)]="filterString" class="form-control" placeholder="输入关键词过滤">

<!-- 假设你的嵌套数组字段叫childItems -->
<div *ngFor="let item of data | deepFilter: filterString: 'childItems'">
  <!-- 渲染顶层数据 -->
  <h4>{{item.topTitle}}</h4>
  <!-- 渲染嵌套数组数据 -->
  <div *ngFor="let child of item.childItems">
    <p>{{child.content}}</p>
  </div>
</div>

方案二：组件内处理过滤逻辑（推荐） #

Angular官方其实不太推荐用非纯管道处理复杂数据（性能会受影响），更建议在组件内直接处理过滤逻辑，灵活性更高：

1. 组件内实现过滤方法 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-nested-data-filter',
  template: `
    <input 
      type="text" 
      [(ngModel)]="filterString" 
      (input)="updateFilteredData()" 
      class="form-control" 
      placeholder="搜索内容..."
    >

    <div *ngFor="let item of filteredData">
      <h4>{{item.topTitle}}</h4>
      <div *ngFor="let child of item.childItems">
        <p>{{child.content}}</p>
      </div>
    </div>
  `
})
export class NestedDataFilterComponent {
  // 原始嵌套数据示例
  data = [
    { topTitle: "顶层数据1", childItems: [{ content: "嵌套内容A" }, { content: "嵌套内容B" }] },
    { topTitle: "顶层数据2", childItems: [{ content: "嵌套内容C" }, { content: "嵌套内容D" }] }
  ];
  
  filterString = '';
  filteredData = [...this.data];

  updateFilteredData() {
    if (!this.filterString) {
      this.filteredData = [...this.data];
      return;
    }

    const lowerFilter = this.filterString.toLowerCase();
    this.filteredData = this.data.filter(item => {
      // 匹配顶层属性
      const topMatch = Object.values(item).some(val => 
        val?.toString().toLowerCase().includes(lowerFilter)
      );
      // 匹配嵌套数组元素
      const nestedMatch = item.childItems?.some(child => 
        Object.values(child).some(childVal => 
          childVal?.toString().toLowerCase().includes(lowerFilter)
        )
      );
      return topMatch || nestedMatch;
    });
  }
}

为什么会出现过滤差异？ #

你之前用的普通filter管道（不管是自定义的还是第三方的），大概率只遍历了顶层对象的属性，没有递归检查子数组里的每个元素。所以当关键词出现在顶层数据时，能正确过滤；但如果关键词只在嵌套数组里，管道就识别不到，导致这些数据被错误过滤掉，这就是你遇到的差异问题。

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