*ng在添加新输入元素时重置所有表单值

Question

我有一个带有按钮的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正在工作

按下"Leggtillån"按钮后,将重置第一个输入的值

如果我尝试输入另一个数字,ngModel仍在为第一个输入工作

任何人都知道这里发生了什么？

Answer 1

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>

Answer 2

我有99％的肯定您可以使用表单，但没有独特的name属性，因为它ngModel可以正常工作。

名称属性必须唯一，才能作为单独的字段进行评估。Angular并不真正关心ngModelin表单，而是关注name属性。

注意，您当前设置的name属性：name="loan.name"实际上仅包含字符串文字loan.name而不是模型的实际值，因此名称不是唯一的。

因此，当您推送新的时loan，所有其他贷款都将获得与新推送的值相同的值，因为所有字段都被评估为相同。

可以通过在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>