我有一个Angular2应用程序,它有一个按钮,可以在我的贷款中添加另一笔贷款。我的ngfor也很简单:

    <div *ngFor="let loan of myLoans">
      <label>{{loan.name}}</label>
      <input type="text" name="loan.name" [(ngModel)]="loan.amount">
    </div>

myLoans是参数为nameamount的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,或者我在贷款对象的构造函数中设置的任何值。
加载应用程序将显示此图片
angular - * ng用于在添加新的输入元素时重置所有表单值-LMLPHP
输入数字时ngmodel正在工作
angular - * ng用于在添加新的输入元素时重置所有表单值-LMLPHP
按下“legg til_n”按钮后,第一个输入的值被重置
angular - * ng用于在添加新的输入元素时重置所有表单值-LMLPHP
如果我尝试输入另一个数字,ngmodel仍在为第一个输入工作
angular - * ng用于在添加新的输入元素时重置所有表单值-LMLPHP
有人知道这里发生了什么吗?

最佳答案

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/

10-12 12:47
查看更多