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

希望这有帮助！：）

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

1 个答案: