Question

在我的代码中，如果我点击add_box图标，它会在下面添加另一个输入表单，以便我可以输入更多值，但这是此链接中显示的问题http://g.recordit.co/R0iifhd6Wd.gif

这是我的代码

Component.ts

instrumentsData = {
  particulars: ''
}

addParticular() {
  this.particulars.push('');
}

Component.html

<div class="form-group">
<button (click)="addParticular()" class="button-box"><i class="material-icons">add_box</i></button>
   <ul class="form-fields" *ngFor="let particular of particulars">
       <li>
           <input type="text" name="name" [(ngModel)]="instrumentsData.particular">
       </li>
   </ul>
</div>

Answer 1

问题很简单。您为所有输入使用相同的ngModel，这就是为什么您可以在应用中看到该行为的原因

如果特定是一个数组，那么你可以像

那样做

<div class="form-group">
<button (click)="addParticular()" class="button-box"><i class="material-icons">add_box</i></button>
   <ul class="form-fields" *ngFor="let particular of particulars; let i= index">
       <li>
           <input type="text" name="name" [(ngModel)]="instrumentsData.particular[i]">
       </li>
   </ul>
</div>

Answer 2

您遇到此问题的原因是您始终在ngModel instrumentsData.particular中绑定1个值

您可以通过以下方式解决问题：

HTML：

<div class="form-group">
<button (click)="addParticular()" class="button-box"><i class="material-icons">add_box</i></button>
   <ul class="form-fields" *ngFor="let particular of particulars; index as i;trackBy: trackByFn">
       <li>
           <input type="text" name="name" [(ngModel)]="particulars[i]">
       </li>
   </ul>
</div>

Component.ts：

...
  particulars: any[] = [];

  addParticular() {
  this.particulars.push('');
  }

  trackByFn(index, item) {
    return index;
  }
...

这是你的傻瓜： https://plnkr.co/edit/98mLfBla5KQqx4hpNne2?p=preview

或者它可能是另一个数组，那么你在* ngFor

中不需要trackBy

如何在Angular 5中迭代具有不同值的输入表单

Component.ts

Component.html

2 个答案: