ngForでフォームHTMLタグを使用すると、ngModelは現在のループ変数の代わりにループ変数の最新の結果を使用します

Question

下記のPlnkrをご覧ください。 app.htmlでhtmlタグのコメントを外すと、すべての子供がTimになります。

<!--<form #form="ngForm">--> 
    <div class="row"> 
    <div class="col-lg-12" *ngFor="let employee of employees"> 
     <div class="col-lg-6"> 
     <label for="employee">Employee</label> 
     <input type="text" class="form-control" id="employee" [(ngModel)]="employee.firstName" name="employee"> 
     </div> 
     <div class="row"> 
     <div class="col-lg-12" *ngFor="let kid of employee.kids" style="border:1px solid #cecece;"> 

      <div class="col-lg-4"> 
      <label for="kid">Kid - {{kid.name}}</label> 
      <input type="text" class="form-control" id="kid" [(ngModel)]="kid.name" name="kid"> 
      </div> 

     </div> 


     </div> 
    </div> 
    </div> 
<!--</form>--> 

https://plnkr.co/edit/AyOVBXAoa8kuE1CQf6XB?p=preview

私はそれをスキップして、いくつかのJavaScriptでそれを置き換えるためにopptionではありませんので、Angular2フォーム機能を使用したいと思います。それらすべてを一意にするためにループのために、あなたの入力に[ngModelOptions]="{ standalone : true }"を追加します（より正確には、彼らは同じFormGroupインスタンスに追加されることはありません）

Answer 1

：

<input type="text" class="form-control" id="kid" [(ngModel)]="kid.name" 
[ngModelOptions]="{ standalone : true }" name="kid">