Angular 14嵌套对象过滤逻辑异常：else分支失效

需求与问题 #

需要实现的嵌套对象过滤规则：

• 当listOfDecision数组长度大于1且包含decisionName为'AEE'的子对象时，移除该'AEE'子对象
• 当listOfDecision数组长度为1且子对象的decisionName为'AEE'时，移除整个父对象

当前实现的else分支（处理listOfDecision长度>1的场景）未生效，且代码存在遍历中修改数组导致的索引错乱问题。

原代码问题分析 #

1. forEach遍历中使用splice导致索引异常：在遍历tempListOfDecision时直接调用splice删除元素，会改变数组长度，后续元素的索引会前移，导致部分元素被跳过，无法完全过滤所有'AEE'子对象。
2. 父数组遍历的splice风险：遍历tempDataSource时用splice删除父对象，同样会导致后续元素索引偏移，可能漏处理部分数据。

解决方案 #

使用filter和map这类纯函数式数组方法处理，避免遍历中修改原数组的问题，逻辑更清晰且不易出错：

public hideAEEDecisionRow(res: any[]) {
  // 先处理每个对象的子决策列表，再过滤需要移除的父对象
  this.tempDataSource = res.map(item => {
    // 过滤掉listOfDecision中decisionName为'AEE'的子对象
    const filteredDecisions = item.listOfDecision.filter(decision => decision.decisionName !== 'AEE');
    return {
      ...item,
      listOfDecision: filteredDecisions
    };
  }).filter(item => {
    // 过滤后子列表为空，说明原列表长度为1且是'AEE'，移除该父对象
    return item.listOfDecision.length > 0;
  });

  this.dataSource = this.tempDataSource;
  console.log("tempDataSource =>", this.tempDataSource);
  this.assignListOfdecisionsToAllObjects(this.tempDataSource);
  console.log("viewAllDataSource=>", this.viewAllDataSource);
}

代码说明 #

1. map处理父对象：对每个异常对象，用filter过滤掉listOfDecision中的'AEE'子对象，返回新对象避免修改原数据。
2. filter过滤父对象：对处理后的数组二次过滤，若某个对象的listOfDecision过滤后为空，说明原列表是长度为1的'AEE'子对象，直接移除该父对象。
3. 纯函数式操作：全程不修改原数组，彻底避免了遍历中修改数组导致的索引错乱问题，符合Angular数据处理的最佳实践。

验证效果 #

针对提供的JSON数据，处理后结果如下：

• 移除anomalyId为85、82的两个父对象（原listOfDecision长度为1且为'AEE'）
• anomalyId为81的对象保留两个非'AEE'子对象，移除'AEE'子对象
• 其余对象保持不变

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