角括弧内に角括弧が入ります

Question

入力フィールドの値をリストのメンバーにバインドしようとしています。 ngForを使用して各メンバーの入力フィールドを作成します。問題は、新しいメンバーをリストにプッシュすると、テンプレートのすべての入力フィールドが空になることです。フィールド値を変更すると、リストのメンバー値も変更されるため、双方向バインディングは引き続き存在します。私が必要とするのは、新しいメンバーをリストにプッシュするときに、テンプレート入力フィールドにメンバー値を保持する方法です。テンプレートも変化し、新しいフィールドを追加しますので

<form action="submit"> 
    <div *ngFor="let member of MyList; let i = index"> 
    <label for="name"> Name: 
     <input type="text" name='name' [(ngModel)] ='MyList[i].name'></label> 
    </div> 
</form> 
<button (click)="addMember()">add parameter</button> 

AddMember機能がちょうどリストの最後に新しいメンバーをプッシュ： はここに私のhtmlコードです。最初はすべてが見つかりますが、リストに新しいメンバーを追加するとすぐに、そのメンバーの名前の値は空白ではありませんが、前のフィールドはすべて空になります。

Answer 1

フォームを使用しているため、それぞれnameは、別々のフォームフィールドとして評価されるために一意でなければなりません。あなたはこのためにインデックスを使用することができます：あなたは新しい空のフィールドを押すたび、彼らが同じフィールドとして評価されているよう

<input type="text" name='name{{i}}' [(ngModel)] ='MyList[i].name'></label> 

あなたがこれを行う場合を除き、すべてのフィールドが空になります。これは、ngModelを使用しても発生します。