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

Question

I'm having an issue where the Angular 2 model binding seems to be retaining an old index after removing and re-adding an array value. This issue only occurs if the removed value is an index in the start or middle of the array leading me to think Angular is still retaining the old index after it's removed. If I remove an item from the end of the array, and add a new one, it works as expected.

Here is my 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> 

Here is my TypeScript Code:

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

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

-If I delete the second item in a three item array, and add a new item, the text box for the second array value is the same as new item added, but my resulting view returns the correct model data.

See image: enter image description here

Answer 1

I managed to reproduce the issue after realizing you are probably using a form. You had some sort of attempt on trackBy , use that and it should solve your issue.

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

And the function:

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

Hope this helps! :)