我有一个带有按钮的Angular2应用程序,可以为我的贷款添加另一笔贷款.我的* ngFor也非常简单：
<div *ngFor="let loan of myLoans">
<label>{{loan.name}}</label>
<input type="text" name="loan.name" [(ngModel)]="loan.amount">
</div>
myLoans是一个包含名称和数量参数的Loan对象数组.我的按钮也很简单.
<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>
addLoan()函数：
addLoan(): void{
var newLoan = new Loan();
this.myLoans.push(newLoan);
}
我的问题是,当我在列表中添加新贷款时,我在其他贷款的输入字段中的任何值都会返回到0或我在贷款对象的构造函数中设置的任何值.
键入数字时ngModel正在工作
按下“Leggtillån”按钮后,将重置第一个输入的值
如果我尝试输入另一个数字,ngModel仍在为第一个输入工作
任何人都知道这里发生了什么？
AJT_82接近问题,因为非唯一名称会导致您出现问题,但是您可以通过将模板html更改为此来进行更简单的修复,以及您可能需要的更多修复.
<div *ngFor="let loan of myLoans">
<label>{{loan.name}}</label>
<input type="text" [name]="loan.name" [(ngModel)]="loan.amount">
</div>
注意在[]中输入名称的更改.这将确保模板维护名称的链接,并且只要每个贷款的名称是唯一的,标识符也是唯一的.
更新：
如果name不是唯一的,您可以为其添加索引以使其唯一.
<div *ngFor="let loan of myLoans; let i=index">
<label>{{loan.name}}</label>
<input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>
