ダイナミック入力リスト（ngFor）でテンプレート駆動型を使用する

Question

私はWeb開発に新規で、angular2を使用するMEANスタックプロジェクトに取り組んでいます。 ngForを使用して動的入力リストをテンプレート駆動型フォームに追加しようとしていますが、私が実装する方法で異常な動作を観察しました。私は正しい方法でそれをやっているのだろうかと思っています...

異常な動作：2つ以上の入力フィールドを追加し、最後の入力ではない入力を削除すると、次に新しいエントリを追加するときに、私は今削除したものの下にあるすべてのエントリをリセットします。さらに、どういうわけか新しいエントリは上記のエントリとバインドされていますか？ここで

demo of the issue

私plunkerである：ここでは http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview

は私がngForを使用して、ダイナミック入力してテンプレート駆動型フォームを実装する方法です。私は別のStackOverflowポストに言及した角度-2-テンプレート駆動型フォームを-ngfor-入力で任意のヘルプは高く評価され

<div *ngFor="let hero of heroArray; let i = index"> 

      <div class="form-group"> 
      <label for="name">Name</label> 
      <input type="text" class="form-control" id="name" 
        required 
        [(ngModel)]="hero.name" name="name-{{i}}" 
        #name="ngModel" > 
      <div [hidden]="name.valid || name.pristine" 
       class="alert alert-danger"> 
       Name is required 
      </div> 
      </div> 
     </div> 

。ありがとう！

Answer 1

私は問題があなたのnameプロパティと関連していると仮定しPlunkrのデモ:)

との質問が好きです。固有の名前でなければなりません。インデックスを一意の値として使用するのは間違っています。配列を変更した後で混合されます。

だから私はidとして一意の名前を使用することができます：あなたは正しく1を、それをキャッチPlunker