如何从循环 ngFor 中的 input type="text" 获取输入值

Question

我有关于从 ngFor 中的 input type="text" 获取值的问题，而我将它与 [(ngModel)] 绑定，所有这些都具有相同的值，我如何绑定 ngFor 中的所有输入？

html

<button (click)="saveFeature()" type="button">save</button>

<input class="form-control" type="text" />
<button (click)="addFeature()" type="button">Add</button>

<div *ngFor="let inputservice of servicesfeature_id; let i=index">
  <input class="form-control" [(ngModel)]="listServiceFeature" type="text" />
  <button (click)="RemoveFeature(i)" type="button">Remove</button>
</div>

成分

servicesfeature_id: any = [];
servicesfeature_length: number = 0;
listServiceFeature: any = [];
servicefeature_name: string;

saveFeature(): void {
  console.log(this.listServiceFeature);
}

addFeature(): void {
  this.servicesfeature_id.push('service' + this.servicesfeature_length);
  this.servicesfeature_length += 1;
}

RemoveFeature(index): void {
  this.servicesfeature_length -= 1;
  this.servicesfeature_id.splice(index, 1);
}

这是代码plnkr.co

Answer 1

如果我理解这一点，您希望将输入绑定到listServiceFeature数组的成员。那正确吗？如果这是您想要做的，您可以使用索引直接绑定到数组成员：

  <input class="form-control" [(ngModel)]="listServiceFeature[i]" type="text" />

现在，如果您向添加的输入添加一些文本并点击保存，您将在控制台上获得整个数组。