Tengo una tabla de longitud variable y en cada celda tengo una entrada (el valor predeterminado de cada entrada es 0), necesito que el usuario edite los datos que quiere, luego, cuando presiona un botón, necesito tener todos los data back y el id de la entrada (el id siempre es diferente), incluso los que aún no han sido editados, voy a adjuntar el código para que se entienda mejor:
<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>Entonces, como puede ver, la entrada siempre es diferente porque se genera usando valores que cambian según los valores de ngfor, entonces mi pregunta es: ¿Hay una manera fácil de tener en mi archivo ts una matriz de todos estos valores?
La solución sencilla, vincular ngModel a un objeto:
<input id="gd{{row.id}}_{{column}}" type="number" value=0 [ngModel]="get(row.id,column)" (ngModelChange)="set(row.id,column,$event)">Tu clase:
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; }Siéntase libre de configurar los tipos correctamente.
Use ng-Model con enlace directo a elementos de matriz anidados.
Modelo
<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));