Angular管道过滤嵌套数组失效问题求助

现有代码的核心问题 #

• 原items.filter的回调未返回有效判断结果：仅执行了子项过滤，但既没判断子项是否匹配，也没更新父项的子项列表，导致父项全保留、子项无变化。
• forEach写法错误：forEach无返回值，直接return会导致Pipe返回undefined，完全失去过滤作用，且同样未处理子项和父项的筛选逻辑。

正确实现代码 #

export class FilterPipe implements PipeTransform {
  transform(items: AllContent[], searchText: string): AllContent[] {
    if (!items) return [];
    if (!searchText) return [...items]; // 返回原数组副本，避免修改原始数据

    const lowerSearchText = searchText.toLowerCase();
    return items.reduce((filteredResult, currentItem) => {
      // 过滤当前父项的匹配子项
      const matchedContent = currentItem.content.filter(contentItem => 
        contentItem.content.toLowerCase().includes(lowerSearchText)
      );
      // 仅保留有匹配子项的父项，并更新其子项列表
      if (matchedContent.length > 0) {
        filteredResult.push({
          ...currentItem,
          content: matchedContent
        });
      }
      return filteredResult;
    }, [] as AllContent[]);
  }
}

关键说明 #

• 使用reduce同时完成子项过滤与父项筛选，逻辑更紧凑高效；
• 浅拷贝父项（...currentItem）避免修改原始数据源，防止Angular变更检测出现异常；
• 提前将搜索文本转小写，减少重复字符串转换操作，提升性能；
• 仅当子项过滤结果非空时，才将父项加入最终结果，满足"无子项则移除父项"的需求。

HTML代码无需修改，管道处理后的item已包含过滤后的子项列表，*ngFor会自动渲染匹配的子项。

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