Angular 2删除数组项后，模型绑定不正确

Question

我遇到了一个问题，当我删除并重新添加数组值后，Angular 2模型绑定似乎会保留旧的索引。只有在删除的值是数组开头或中间的索引时，才会出现此问题，这让我想到Angular在删除后仍然保留旧索引。如果我从数组末尾删除一个项目并添加一个新项目，则可以按预期工作。

以下是我的HTML代码：

<div class="row text-center" *ngFor="let date of vm.dates;let i = index;"><!--trackBy:i;-->
  <div class="col-md-6 text-right">
      <label>Date:</label>
  </div>
  <div class="col-md-6 text-left">

      <input name="Date{{i}}" type="text" class="form-control no-wrap" [(ngModel)]="date.Date" value="{{date.Date}}">
      <label *ngIf="showRemoveDate(i)" (click)="removeDate(i)" class="btn btn-danger no-wrap">Remove Date</label>
      <label>{{date.Date}}-{{i}}</label>
  </div>
</div>
<div class="row text-center">
  <div class="col-md-6 text-right">
      &nbsp;
  </div>
  <div class="col-md-6 text-left">
      <label (click)="addDate()" class="btn btn-danger">Add Date</label>
  </div>
</div>

这是我的TypeScript代码:

    removeDate(index: number) {
    this.vm.dates.splice(index, 1);
}

addDate() {
    var date: IDates = {
        Id: "",
        Date: "05/15/2014"
    };
    this.vm.dates.push(date);
}

-如果我从三个项目的数组中删除第二个项目，并添加一个新项目，则第二个数组值的文本框与新添加的项目相同，但我的结果视图返回正确的模型数据。

请参见下面的图片： 查看图片

- Jeff

---

你能否在 Plunker 中重现这个问题？我尝试了你的代码，就我所注意到的来看，它似乎工作正常。 - undefined

因为你将日期硬编码了，所以它将会显示。我说得对吗？ - undefined

@RameshRajendran 不确定你说的“so it will be show”是什么意思？ - undefined

Answer 1

我在意识到你可能在使用表单后，成功复现了这个问题。你对 trackBy 进行了某种尝试，使用它应该能解决你的问题。

<form #myForm="ngForm">
  <div *ngFor="let date of vm.dates;let i = index; trackBy: trackByFn">
    <!-- more code here -->
  </div>
</form>

还有这个函数：

trackByFn(index: any, date: any) {
  return index;
}

希望这对你有所帮助！:)

- AT82

---

这样做就可以了。谢谢帮忙。我尝试使用索引来使用'trackBy'，但是没有成功。有趣的是，我本来打算尝试一个单独的函数'trackBy'，但是还没来得及。再次感谢！ - undefined

没问题，很高兴能帮到你！:) - undefined