Angular删除数组元素时出现循环异常与ID重复问题求助

问题根源 #

• this.phaseRemove是全局数组，每次调用removePhase时未清空，会持续累积之前的元素，引发数组引用混乱。
• 直接修改对象的id属性（element.id = index）时，由于对象是引用类型，会同步修改this.phase中原对象的id，导致后续操作的id标识完全混乱。
• 第一次执行后，this.phase被赋值为this.phaseRemove，两者指向同一数组引用，后续操作会互相干扰。

修复后的代码 #

组件逻辑部分：

removePhase(id: number) {
  // 过滤掉要删除的元素，生成新数组
  const filteredPhases = this.phase.filter(element => element.id !== id);
  
  // 重新分配id，通过对象展开创建新对象，避免污染原引用
  const updatedPhases = filteredPhases.map((element, index) => ({
    ...element,
    id: index
  }));
  
  this.phase = updatedPhases;
  this.dataSource = new MatTableDataSource(this.phase);
}

模板部分无需修改，保持原有绑定即可：

<button mat-flat-button (click)="removePhase(phase.id)">
   <span><mat-icon>close</mat-icon></span>
</button>

关键改进点 #

• 用Array.filter()替代手动forEach循环过滤，直接生成新数组，彻底抛弃全局phaseRemove变量的依赖。
• 用Array.map()结合对象展开运算符...创建新对象，重新分配id时不会修改原对象引用，从根源避免id混乱。
• 全程使用局部变量处理中间结果，杜绝全局数组的引用污染问题。

原代码故障拆解 #

第一次删除id=0后：

1. this.phaseRemove填充了原id=1、2、3的元素，随后这些元素的id被强制改为0、1、2。
2. 因为phaseRemove中的元素是this.phase的引用，所以this.phase里的原id=1元素也被改成了id=0，这就是第一次日志出现两个id=0对象的原因。
3. 后续this.phase = this.phaseRemove让两者指向同一数组，第二次调用时phaseRemove还保留着上次的元素，循环时重复添加，最终引发逻辑混乱。

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