如何在 *ngfor 中获取 <input> 的值？

Question

我有一个可变长度的table，在每个单元格中我都有一个输入（每个输入的默认值为0），我需要用户编辑他想要的数据，然后当他按下一个按钮我需要返回所有数据和输入的 id（id 总是不同的），即使是那些还没有被编辑的，我将附上代码以便更好地理解：

<form  #login (ngSubmit)="onSubmit(login.value)" novalidate>
    <table class="rtable">
        <tr>
            <th></th>
            <th *ngFor="let column of mesi">
                {{column}}
            </th>
        </tr>

        <tr *ngFor="let row of FigProfs">
            {{row.nome}}
            <td *ngFor="let column of mesi">
                <input  id="gd{{row.id}}_{{column}}" type="number"  value=0 >
            </td>
            
        </tr>
    </table>
    <button class="btnsubmit" type="submit">AVANTI</button>
</form>

所以你可以看到输入总是不同的，因为它是使用根据 ngfor 的值而变化的值生成的，所以我的问题是：有没有一种简单的方法可以在我的 ts 文件中包含所有的数组这个值？

Answer 1

直接的解决方案，将 ngModel 绑定到一个对象：

<input  id="gd{{row.id}}_{{column}}" type="number"  value=0 [ngModel]="get(row.id,column)" (ngModelChange)="set(row.id,column,$event)">

你的class：

data: any = {};

get(i, j) {
  return this.data[i] && this.data[i][j];
}

set(i, j, v) {
  this.data[i] = this.data[i] || {};
  this.data[i][j] = v;
}

请随意正确设置类型。

Stackblitz demo

Answer 2

使用 ng-Model 直接绑定到嵌套数组元素。

模板

    <tr *ngFor="let row of FigProfs;  let i = index">
        {{row.nome}}
        <td *ngFor="let column of mesi; let j = index">
            <input  id="gd{{row.id}}_{{column}}" type="number"  [(ngModel)]="inputValues(i, j)" >
        </td>
        
    </tr>

TS

let inputValues = new Array(this.FigProfs.length).fill(new Array(this.mesi.length).fill(0));

如何在 *ngfor 中获取 <input> 的值？

How can I take the value of an <input> in an *ngfor?

html

javascript

typescript

angular

angular-ngfor