Question

我具有以下angular 6组件，可使用html表添加新用户：

user-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>
[...]

user-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表中消失了。 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}`;
}

（您可以返回唯一想要的内容）

Answer 2

您要在哪个浏览器上进行测试吗？因为我测试了您的代码，但没有意识到您指定的症状。

数组ngFor数据丢失/消失

2 个答案: