如何使用Angular管道按商品名称过滤分类列表下的嵌套商品列表

嵌套分类商品列表过滤管道实现方案 #

你原有代码的核心问题如下：

• 错误调用forEach方法直接取name属性：forEach是数组遍历方法，无返回值，无法直接获取商品名称
• 仅做了分类层级的过滤，没有剔除分类下不匹配搜索词的商品，不符合需求
• 空值判断冗余，!searchfilter已经包含了空字符串的判断逻辑，不需要额外写分支

修正后的管道代码 #

export class MyFilterPipe implements PipeTransform {
  transform(
    items: Array<CatalogItemsWithCategory>, 
    searchfilter: string
  ): Array<CatalogItemsWithCategory> {
    // 空值/空搜索词直接返回原列表
    if (!items || !searchfilter?.trim()) {
      return items;
    }
    const keyword = searchfilter.trim().toLowerCase();
    
    // 遍历每个分类，筛选分类下匹配的商品
    return items.reduce((result, category) => {
      // 筛选当前分类下商品名称包含关键词的商品
      const matchedItems = category.catalogItems.filter(item => 
        item.name.toLowerCase().includes(keyword)
      );
      // 如果当前分类下有匹配的商品，保留分类并替换为过滤后的商品列表
      if (matchedItems.length > 0) {
        result.push({
          ...category,
          catalogItems: matchedItems
        });
      }
      return result;
    }, [] as Array<CatalogItemsWithCategory>);
  }
}

核心逻辑说明 #

• 先对搜索词做去空格、转小写处理，避免大小写、前后空格影响匹配结果
• 用reduce遍历所有分类，对每个分类先筛选出符合名称匹配规则的商品
• 仅保留存在匹配商品的分类，同时将分类下的商品列表替换为筛选后的结果，完全符合「保留分类结构+仅展示匹配商品」的需求

模板使用示例 #

<!-- 搜索框绑定搜索关键词 -->
<input type="text" [(ngModel)]="searchKeyword" placeholder="输入商品名称搜索">

<!-- 分类商品列表渲染时调用管道 -->
<div *ngFor="let category of categoryProductList | myFilter: searchKeyword">
  <h3>{{ category.categoryName }}</h3>
  <div *ngFor="let product of category.catalogItems">
    {{ product.name }}
  </div>
</div>

注意事项 #

• 管道需要在对应模块的declarations数组中声明，否则无法在模板中调用
• 如果商品列表量级较大，Angular官方不推荐使用管道做过滤操作，会有性能损耗，建议在组件中监听搜索词变化，直接过滤数据源后再渲染

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