刪除數組項後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>

這是我的打字稿代碼：

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

希望這有助於！ :)