ngModelのngFor要素を持つ動的なangle2フォーム

Question

私はngModelに接続された動的フォームを作成しようとしています。これにより、ユーザーは必要に応じてより多くのコントロールを追加できます。ただ、下図のように：

image

それは以前の入力の内容を消去などのコントロールの新しいセットを追加する場合を除き、期待通りの形で動作します。モデルは変更されませんが。私はこれについて、私が話している振る舞いを実証するためにplunkrを作成しました。

これは私が書いたHTMLテンプレートです：私はこの振る舞いを理解し、すべての関連することはできません

import {Component, ChangeDetectionStrategy} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app.html' 
}) 
export class App { 
    works = []; 

    addWork(){ 
     this.works.push({}); 
    } 

    removeWork(index){ 
     this.works.splice(index, 1); 
    } 

    get diagnostic() { 
     return JSON.stringify(this.works); 
    } 
} 

：

<tr *ngFor="let work of works; let i = index"> 
 
    <td> 
 
    <select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation"> 
 
     <option>Operation 1</option> 
 
     <option >Operation 2</option> 
 
    </select> 
 
    </td> 
 

 
    <td> 
 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
 
      name="cost"> 
 
    </td> 
 

 
    <td> 
 
    <input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours" 
 
      name="hours"> 
 
    </td> 
 

 
    <td> 
 
    <button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)">Remove</button> 
 
    </td> 
 
</tr>

とtypescriptですコンポーネント定義を私が見つけた質問は、角度の古いバージョンについてであり、どれも同様の問題を抱えていませんでした。

ありがとうございました！

Answer 1

あなたのコントロールには、Angular2で正しく機能させるために固有の名前が必要です。次のようにしてください：

<td> 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
      name="cost-{{i}}"> 
</td>