在angular中的一个项目中，我有一个包含多个元素的表格，每行都有一个按钮，用于删除相应的行。在按钮中，我插入了一个事件，单击该事件将调用一个函数并传递对象的id：

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

按下时调用此函数：

removePhase(id:number){
    console.log(this.phase) /*First log*/
    this.phase.forEach((element) => {
    if (element.id != id) {
      this.phaseRemove.push(element);
      }
    })
    this.phaseRemove.forEach((element, index) => {
      element.id = index;
    })
    this.phase = this.phaseRemove;
    this.dataSource = new MatTableDataSource(this.phase);
    console.log(this.phase) /*Second log*/
  }

这是相位对象：

[
    {
        "id": 0,
        "phaseName": "Phase 1"
    },
    {
        "id": 1,
        "phaseName": "Phase 2"
    },
    {
        "id": 2,
        "phaseName": "Phase 3"
    },
    {
        "id": 3,
        "phaseName": "Phase 4"
    }
]

当函数第一次启动时，一切正常，而当我第二次启动它时，它会循环第一次for。我输入了两个控制台日志，看看会发生什么，在第一个日志中，我得到了这个对象（在这个日志中，我按下按钮删除id为0的对象）：

[
    {
        "id": 0,
        "phaseName": "Phase 1",
    },
    {
        "id": 0,
        "phaseName": "Phase 2",
    },
    {
        "id": 1,
        "phaseName": "Phase 3",
    },
    {
        "id": 2,
        "phaseName": "Phase 4",
    }
]

在第二个日志中，我得到了正确的对象：

[
    {
        "id": 0,
        "phaseName": "Phase 2",
    },
    {
        "id": 1,
        "phaseName": "Phase 3",
    },
    {
        "id": 2,
        "phaseName": "Phase 4",
    }
]

正如你所看到的，第一个对象的控制台日志也将id 0设置为第二个对象，我认为这是无限for循环错误，但我不知道如何解决它，谢谢。