Angular binding binding in ngFor

Question

我試圖將輸入字段值綁定到列表的成員。我使用ngFor爲每個成員創建輸入字段。問題是，當我將新成員推送到列表中時，模板上的所有輸入字段都將變爲空白。雙向綁定仍然存在，因爲當我更改字段值時，列表中的成員值也會更改。我需要的是一種在將新成員推送到列表時保持模板輸入字段中的成員值的方法。 這裏是我的html代碼：

<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功能只是將一個新成員到列表的末尾，以便模板也發生變化，並增加了新的領域。一切都在開始時找到，但只要我將新成員推送到列表中，所有先前的字段都將變爲空，儘管這些成員的名稱值並非空白。

Answer 1

由於您使用的是表單，因此每個name都必須是唯一的，才能作爲單獨的表單字段進行評估。您可以使用索引此：

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

除非你做到這一點，當你推一個新的空場，所有字段，因爲它們是作爲同一領域進行評估成爲空。儘管您使用ngModel，但仍會發生這種情況。