删除数组项后，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);
}

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

看图： enter image description here

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;
}

希望这会有所帮助！ :)