I have to dynamically generate the data source for my PrimeNG table because I don't know how many columns I will have, or even what the Header for each column will be. I need the table to be editable with 2-way data binding. I am trying to use a 2-dimensional array to hold the data (gridData: number[][]) and dynamically creating the list of columns as just {index: 0, header: "col1"}, etc. The grid is displayed correctly with correct initial values, but the changes are not recorded back to the grid. PrimeNG documentation states that the [editablecolumnfield] directive on the element should name the 'field', but these entries don't have field names, just indexes because the data table is not an array of objects with members, rather an array of arrays with indexes. Is it even possible to 2-way data bind to a 2-dimensional array?
I am new to Angular development and PrimeNG, so if I am going about this all wrong, please point me in the right direction.
<p-table [columns]="gridCols" [value]="gridData">
<ng-template pTemplate="header" let-gridCols>
<tr>
<th *ngFor="let col of gridCols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-gridRow let-columns="gridCols">
<tr>
<td *ngFor="let col of gridCols" [pEditableColumn]="gridRow" [pEditableColumnField]="col.index">
<p-cellEditor>
<ng-template pTemplate="input">
<input type="number" ([ngModel])="gridRow[col.index]" />
</ng-template>
<ng-template pTemplate="output">
{{gridRow[col.index]}}
</ng-template>
</p-cellEditor>
</td>>
</tr>
</ng-template>
</p-table>
This is one of those evil detail mistakes... you misplaced the brackets for the two way data binding on the input field. The []-brackets seem to have to be the outer brackets around the ngModel
.
Yours:
<input type="number" ([ngModel])="gridRow[col.index]" />
Correct:
<input type="number" [(ngModel)]="gridRow[col.index]" />
Apart from this, 2-way data binding works fine for 2-dimensional array.