Angular新@for指令下动态FormArray删除元素显示异常问题

问题原因 #

你遇到的异常是因为@for指令使用track $index作为跟踪标识导致的。当删除FormArray中指定索引的元素后，剩余元素的索引会重新排序，@for基于索引跟踪时，会错误判定最后一个索引对应的元素已被移除，因此在DOM中删除最后一个元素，而非目标索引的元素。此前使用*ngFor时，要么未显式指定trackBy为索引，要么Angular默认处理逻辑规避了这个问题。

解决方案 #

不要用索引作为@for的跟踪标识，改用每个FormControl实例本身（或选项的唯一业务标识，比如id）来跟踪元素，确保Angular能精准识别每个列表项的唯一性。

修改后的HTML代码 #

@for (opcion of listaOpciones.controls; track opcion; let a = $index){
  <div class="row mb-2 mb-md-0 card_opciones" [formGroupName]="a" >
    <div class="titulo_mobile mb-2 etiqueta col-12"></div>
    <div class="col-1 contenedor_quitar">
      <button class="col-2 btn boton_quitar" (click)="deleteOption(a)" type="button">
        <i class="fas fa-minus"></i>
      </button>
    </div>
  </div>
}

额外提示 #

1. 跟踪标识优化：如果你的每个选项有唯一业务字段（如id），可以用track opcion.value.id替代track opcion，更贴合业务逻辑。
2. 函数拼写修正：你的删除函数存在拼写错误，deteleteOption应改为deleteOption，避免运行时报错：

deleteOption(index: number) {
  this.listaOpciones.removeAt(index);
}

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