如何在Angular 7中过滤数组的数组？请求技术协助

嘿，我来帮你搞定Angular 7里嵌套数组的过滤问题！其实核心就是结合原生JS的数组方法，Angular里用起来和普通JS没差，我给你分几种常见场景举例说明：

假设你有这样的嵌套数组结构：

// 示例嵌套数组
const nestedArray = [
  { id: 1, items: [{ name: '苹果', type: '水果' }, { name: '胡萝卜', type: '蔬菜' }] },
  { id: 2, items: [{ name: '香蕉', type: '水果' }, { name: '橙子', type: '水果' }] },
  { id: 3, items: [{ name: '土豆', type: '蔬菜' }, { name: '白菜', type: '蔬菜' }] }
];

如果想筛选出子数组里至少包含一个水果的父元素，可以用filter + some组合：

const filteredParents = nestedArray.filter(parent => 
  parent.items.some(item => item.type === '水果')
);

• filter：遍历父数组，筛选出满足条件的父元素
• some：检查子数组是否存在至少一个符合条件的元素，只要有一个达标，对应的父元素就会被保留

如果要求父元素的所有子元素都必须是水果才保留，把some换成every即可：

const filteredParentsAll = nestedArray.filter(parent => 
  parent.items.every(item => item.type === '水果')
);

every会校验子数组的每一个元素，只有全部符合条件，父元素才会被保留（上面例子里只有id=2的父元素会被选中）

有时候你不仅要筛选父元素，还要把父元素下的子数组也过滤一遍，只留下符合条件的子项，这时候用filter + map组合：

const filteredWithChildItems = nestedArray
  .filter(parent => parent.items.some(item => item.type === '水果'))
  .map(parent => ({
    ...parent, // 复制父元素的原有属性
    items: parent.items.filter(item => item.type === '水果') // 过滤子数组
  }));

这里用扩展运算符...parent是为了保证数据不可变性，避免直接修改原数组导致Angular变更检测出问题。

在组件类里可以把逻辑封装成方法，方便模板调用：

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

@Component({
  selector: 'app-nested-filter',
  templateUrl: './nested-filter.component.html'
})
export class NestedFilterComponent {
  nestedData = [
    { id: 1, items: [{ name: '苹果', type: '水果' }, { name: '胡萝卜', type: '蔬菜' }] },
    { id: 2, items: [{ name: '香蕉', type: '水果' }, { name: '橙子', type: '水果' }] },
    { id: 3, items: [{ name: '土豆', type: '蔬菜' }, { name: '白菜', type: '蔬菜' }] }
  ];
  filteredData: any[];

  filterByType(type: string) {
    this.filteredData = this.nestedData
      .filter(parent => parent.items.some(item => item.type === type))
      .map(parent => ({
        ...parent,
        items: parent.items.filter(item => item.type === type)
      }));
  }
}

模板里可以这样调用：

<button (click)="filterByType('水果')">只看含水果的分组</button>
<button (click)="filterByType('蔬菜')">只看含蔬菜的分组</button>

<div *ngFor="let group of filteredData">
  <h3>分组 {{ group.id }}</h3>
  <ul>
    <li *ngFor="let item of group.items">{{ item.name }}</li>
  </ul>
</div>

Angular 7完全支持这些ES6+的数组方法，不需要额外依赖，只要注意保持数据不可变性，就能顺畅完成嵌套数组的过滤啦！

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