数组 ngFor 数据丢失/消失

Question

我有以下 angular 6 个组件来添加新用户 html table：

用户-add.component.html

[...]
<tbody>
    <tr *ngFor="let value of data.pos; let i = index">
        <td><input matInput [(ngModel)]="value.username" name="pos-{{i}}-username"></td>
        <td><input matInput [(ngModel)]="value.firstname" name="pos-{{i}}-firstname"></td>
        <td><input matInput [(ngModel)]="value.lastname" name="pos-{{i}}-lastname"></td>
    </tr>
</tbody>
[...]

用户-add.component.ts

export class UserAddComponent {

    data: any = {
        pos: [{modell: '', user: '', asset: '', serial: ''}]
    };

    addPosition(){
        this.data.pos.push({modell: 'c', user: '', asset: '', serial: ''});
        console.log(this.data);
    }

    removePosition(pos){
        this.data.pos.splice([pos],1);
        console.log(this.data);
    }

当我单击调用 addPosition() 按钮并填写所有输入字段时，它工作正常。

问题：当我单击删除按钮调用函数 removePosition(1) 以删除第二行时，它会按原样消失。但是，当我再次单击 addPosition 添加新行时，第 0 行的数据从 html table 中消失了。 addPosition 中的 console.log() 仍然输出 pos 0 的正确数据，但在第 0 行的输入字段中不可见。

Answer 1

这是一个跟踪问题。通过遍历对象并对它们的属性使用双向绑定，你会让 Angular 失去理智。

按功能为其提供自定义轨道，或者像这样

<tr *ngFor="let value of data.pos; let i = index; trackBy: value.id">

（ID = 每个对象的唯一标识符）

或者像这样

<tr *ngFor="let value of data.pos; let i = index; trackBy: customTB">

customTB(index, item) {
  return `${index}-${item.id}`;
}

（你可以return你想要什么，只要它是独一无二的）

Answer 2

您是在哪种浏览器上进行测试？因为我测试了你的代码并没有意识到你指定的症状。

数组 ngFor 数据丢失/消失

Array ngFor data missing / disappearing

javascript

html-table

ngfor

angular