配列の項目を削除した後に角度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); 
} 

私は3つの項目の配列で2番目の項目を削除し、追加-if新しい項目、2番目の配列値のテキストボックスは、追加された新しい項目と同じですが、結果のビューは正しいモデルデータを返します。

参照イメージ： 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; 
} 

は、この情報がお役に立てば幸い！ :)