我有一个 Angular2 应用程序,它带有一个按钮,可以将另一笔贷款添加到我的贷款中。我的 *ngFor 也很简单:
<div *ngFor="let loan of myLoans">
<label>{{loan.name}}</label>
<input type="text" name="loan.name" [(ngModel)]="loan.amount">
</div>
myLoans
是一组带有 name
和 amount
参数的 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 在输入数字时正常工作
按下“Legg til lå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>
注意将名称放在 [ ] 中的变化。这将确保模板保持指向名称的链接,只要每笔贷款的名称是唯一的,标识符也是唯一的。
更新: 如果名称不唯一,您可以为其添加索引以使其像这样唯一。
<div *ngFor="let loan of myLoans; let i=index">
<label>{{loan.name}}</label>
<input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>
关于angular - *ng用于在添加新输入元素时重置所有表单值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43664339/