需要找到 *ngfor生成的输入字段的值

Question

app.component.html：

<div *ngFor="let ivalue of arraytoDispaly;let i = index;">
    <input type="text" [value]="ivalue.inputValue" />
    <button (click)='GetId(i)'>GetID</button>

app.component.ts：

arraytoDispaly = [
{'inputValue':'abc'},
{'inputValue':'def'},
{'inputValue':'ghi'}];
GetId(val){
    console.log()
   }

需要在单击按钮上获取输入字段的值，我使用了ElementRef和@viewchild，但没有获得该值。任何人都可以指导我需要做的事情，尽管我使用document.getElementById可以通过ID获得价值，但需要知道访问值的访问方式，谢谢

Answer 1

您可以通过ngFor中的索引传递当前值，如下 -

<div *ngFor="let ivalue of arraytoDispaly;let i = index;">
    ....
<button (click)='GetId(ivalue)'>GetID</button>
GetId(val){
  console.log(val.inputValue)
}

Answer 2

我们可以使用 ngmodel 在对象和输入元素之间同步数据

<div *ngFor="let elm of arraytoDispaly;">
    <input type="text" [(ngModel)]="elm.inputValue" /> {{elm.inputValue}}
</div>

Answer 3

尝试：

<div *ngFor="let ivalue of arraytoDispaly;let i = index;">
    <input #i type="text" [value]="ivalue.inputValue" />
    <button (click)='getId(i.value)'>GetID</button>
</div>

---

getId(val){
    console.log(val)
   }

工作stackblitz

---

ps：方法应为骆驼计（ getId not GetId）