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

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

见图： 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;
}

希望对您有所帮助！ :)

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

Angular 2 model binding incorrect after removing array item

javascript

arrays

model-binding

angular