需要查找 *ngFor 生成的输入字段的值答案

【问题标题】：Need to find the value of input field generated by *ngFor需要查找 *ngFor 生成的输入字段的值
【发布时间】：2018-12-19 12:47:33
【问题描述】：

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 获得价值，但需要知道 Angular 访问价值的方式，谢谢

【问题讨论】：

标签： angular

【解决方案1】：

您可以在ngFor 中传递当前值而不是索引，如下所示 -

<div *ngFor="let ivalue of arraytoDispaly;let i = index;">
    ....
<button (click)='GetId(ivalue)'>GetID</button>

GetId(val){
  console.log(val.inputValue)
}

【讨论】：

感谢您的解决方案，您能否告诉我们如何通过 id 访问使用 *ngFor 生成的输入值或除上述函数之外的任何函数调用中的任何内容。
除了上述方法之外，是的，您可以使用id 访问该值，但为此，您需要将id 动态分配给元素。
@MOBSHIRIQBAL 如果它只有一个 ngFor 你正在使用的组件你可以做id={{i}}
再次感谢，您是否告诉使用 document.getElementbyId 或其他内容进行访问，请您指定
是的，如果您分配动态id，那么您可以使用document.getElementbyId

【解决方案2】：

我们可以使用 ngModel 来同步对象和输入元素之间的数据

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

【讨论】：

【解决方案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)
   }

Working Stackblitz

PS：方法应该是驼峰式（getId 而不是GetId）

【讨论】：

@PardeepJain 是的，输入有一个值，伙计
您将输入命名为 i 并将 i 作为索引 ??
@malbarmawi 那又怎样？
@malbarmawi，输入在 ngFor 里面，请在编辑之前检查它是否工作..
@selemmn 因为有时在复杂的问题中，获取具有相同名称的变量的值会变得很复杂。