获取 ngFor 在按钮单击时创建的输入值 Angular

Question

我有一个使用 *ngFor 生成的输入字段，我想在单击提交按钮时捕获输入字段内的所有这些值。 我已经尝试了所有可能的方法，但无法获取输入的数据，请帮助我。 下面是我尝试过的代码。

html 代码：

arr= [{name:"test", percentage: "29"},{name:"abc", percentage: "45"}, {name:"def", percentage: "63"}]


<div *ngFor= "let obj of arr">
<input type="text" [value]="obj.percentage">
</div>
<button (click)="submit()"></button>

Answer 1

您当前的解决方案没有任何形式的表单管理器。 有两种解决方案：

反应性 Forms

// component.ts
form = new FormGroup( {
  test: new FormControl(null)
  // Add your other fields here
} );

// Patch your values into the form
arr.forEach(value => {
  this.form.get(value.name).patchValue(value.percentage);
})

// html
<div *ngFor= "let obj of arr">
  <input type="text" [formControl]="form.get(obj.name)" >
</div>

您的表单将存储所有值。 要获得它们一次，您可以使用form.value

模型

// component.ts
test: boolean;
// Add your other fields here

// Patch your values into the form
arr.forEach(value => {
  this.[value.name] = value.percentage;
})

// html
<div *ngFor= "let obj of arr">
  <input type="text" [(ngModel)]="obj.name" >
</div>

这两个例子都是偷工减料，但它们应该让您充分了解下一步该往哪里走。 我建议使用反应式 Forms 路径。