ngFor遍历input标签数据显示问题

发表于 更新于 分类于

场景是用ngFor来遍历input标签，动态添加input输入框。问题是在我修改第一组input的值之后，添加第二组input标签，第一组的值显示了原来的默认值。正确的应该是 第一组显示之前修改的值，第二组为默认。

可能没有陈述明白，直接上代码和图。

1
2
3
4
5
6
7
8
<div *ngFor="let t of tactics; let i=index">
    <nz-input-group nzCompact>
        <input name="monthValue" type="number" nz-input [(ngModel)]="t.monthValue" >
        <input name="discountValue" type="number" nz-input [(ngModel)]="t.discountValue" >
        <button nz-button nzGhost="true" nzType="primary" (click)="removeTactic(t)">-</button>
    </nz-input-group>
</div>
<button nz-button nzGhost="true" nzType="primary" (click)="addTactic()">+</button>

。。。查了下资料Angular表单中使用ngModel需要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”，二选一。看到“必须带有name属性”就在想会不会跟name属性有关，上面html里的input标签name属性是写死的，于是我稍微改了下。

1
2
 <input [name]="'monthValue' + i"  type="number" nz-input [(ngModel)]="t.monthValue" >
<input [name]="'discountValue' + i" type="number" nz-input [(ngModel)]="t.discountValue" >

i是ngFor里遍历项的索引，在用值绑定这样input的name属性就是动态的了。
试了下确实可以，23333

列表场景下的ngFor

上面的方法只适用于 DOM 体积较小，不涉及引用更改的场景。
在使用 REST-API或使用不可变的数据结构时，编辑了其中一对象，所有对象的引用都发生了变化。原因这时的 Angular 对每一个对象都是陌生的，它不认识这里的对象，所以就删除了之前的 DOM ，做了一次新的渲染。导致所有列表数据一致。。。

这时我们可以使用trackBy函数来帮助 Angular 识别每一个对象，只需要为每一个对象添加一个唯一标识就好。
例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
array = [
    {
      guid: '900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
      age: 32,
      name: 'Powers Schneider',
    },
    {
      guid: '880381d3-8dca-4aed-b207-b3b4e575a15f',
      age: 25,
      name: 'Adrian Lawrence',
    },
    {
      guid: '87b47684-c465-4c51-8c88-3f1a1aa2671b',
      age: 32,
      name: 'Boyer Stanley',
    },
  ]

  trackElement(index: number, element: any) {
    return element ? element.guid : null
  }
1
2
3
<ul>
  <li *ngFor="let element of array; trackBy: trackElement"></li>
</ul>

感兴趣可以阅读: Angular NgFor: Everything you need to know