Angular 在窗体中删除和添加行时的奇怪行为

基本上，我有一个模板驱动的表单，其中有两行。有一个添加按钮用于添加行，每行有一个删除按钮用于删除行

<form>
    <ng-container *ngFor="let model of models; index as i;">
        <input type="text" id="name-{{i}}" name="name-{{i}}" [(ngModel)]="model.name"/>
        <input type="text" id="value-{{i}}" name="value-{{i}}" [(ngModel)]="model.value"/>
        <button type="button" (click)="remove(i)">Remove</button>
        <br/>
    </ng-container>
</form>
<button type="button" (click)="add()">Add</button>

复制步骤：

拆下第二排

添加新行

现在你可以看到第二排和第三排都是“新的”。有人有什么想法吗？

---

您可以将此代码复制并粘贴到stackblitz中，它将正常工作，或者真正中断。

问题在于您的

名称的
代码中的
ID

如果使用“唯一对象”：

models = [{
    name: "name 1",
    value: "value 1",
    id:Math.random()
},{
    name: "name 2",
    value: "value 2",
    id:Math.random()
},{
    name: "name 3",
    value: "value 3",
    id:Math.random()
}];

add() {
    this.models.push({
        name: "new",
        value: "new",
        id:Math.random()
    });
}

及


去除

然后它会工作
你需要告诉angular跟踪你的物品。当前删除第二项时，表单值如下所示：

“name-0”：“name 1”，
“值-0”：“值1”，
“名称2”：“名称3”，
“值2”：“值3”

索引不会更新，因此当您推送一个新项目时，它会占据
name-2
和
value-2
位置，从而“同时”更新第二个和第三个值。如果使用
trackBy
，angular将跟踪唯一索引。因此，请加上：



以及功能：

trackbyFn（索引，项）{
收益指数；
}


models = [{
    name: "name 1",
    value: "value 1",
    id:Math.random()
},{
    name: "name 2",
    value: "value 2",
    id:Math.random()
},{
    name: "name 3",
    value: "value 3",
    id:Math.random()
}];

add() {
    this.models.push({
        name: "new",
        value: "new",
        id:Math.random()
    });
}

<ng-container *ngFor="let model of models; index as i;">
        <input type="text" id="name-{{model.id}}" name="name-{{model.id}}" [(ngModel)]="model.name"/>
    <input type="text" id="value-{{model.id}}" name="value-{{model.id}}" [(ngModel)]="model.value"/>
    <button type="button" (click)="remove(i)">Remove</button>
</ng-container>