首页 文章

Angular 2 ng在索引2处错误地更改值

提问于
浏览 次
1

我有一个角形的表格 . 该表单由一个具有多个选项的ngFor组成 .

<div *ngFor="let item of items; let i = index">
  <select name="" id="" [(ngModel)]="items[i]">
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option>
  </select>
</div>

以及此示例的数据：

options = Array(10).fill(1).map((option,index) => {
    return {
      display:'thing' + index,
      value: index
    };
  });
  items = [2,7,2,7,2,7,2,7];

奇怪的是，当我改变第二个选择时，第四个选择将反映相同的变化 . 但是该模型不会反映这种变化 .

出于什么原因，视图将在匹配之后更改输入2索引 . 更奇怪的是，这只会在第一次发生，然后它会表现出你的预期 .

以下是查看问题的plunker：http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

会导致什么？我该如何解决这个问题？

angular ngfor ngmodel

1 回答

  • 1

    @yurzui有正确答案 trackBy 防止任何不必要的突变 . 这是 trackBy 的代码：

    <div *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <select name="" id="" [(ngModel)]="items[i]">
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option>
  </select>
</div>

    对于 trackBy 来说，取一个函数很重要，这是我解决这个问题的一个错误：

    trackByFn(i: number) {
    return i;
  }

    @yurzui的工作示例提供程序：

    https://plnkr.co/edit/TAbQFqa3NeBvQ3FpKYCP?p=preview

    回复于

相关问题