In my Angular CLI-built application, I have a component with a model named globalModel. This model is populated with user inputs from the previous page and displayed to the user in an HTML table on the current page. Here's how it's done:
<input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier">Class A
<input type="radio" [(ngModel)]="criteria1" name="parameter1Identifier">Class B
<input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier">Type 1
<input type="radio" [(ngModel)]="criteria2" name="parameter2Identifier">Type 2
<table>
<thead>
<tr *ngIf="tableColumnCount">
<th *ngFor="let colNumber of tableColumnCount | rangePipe">
<input type="checkbox"
[checked]=false
(click)="selectAllElementsInColumnOfTheTableIn(colNumber);">
select column {{ n + 1 }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of globalModel | modelToArrayOfArraysFilter: criteria1: criteria2;">
<td *ngFor="let acol of row; let i = index;">
....
</td>
</tr>
</tbody>
</table>
The total number of columns in the table is determined by the variable totalColumnsOfTheTable, which is set as follows in the component:
set totalColumnsOfTheTable(count: number) {
if ( this.tableColumnCount < count ) {
this.tableColumnCount = count;
this._cd.detectChanges();
}
}
The rows in the table can contain varying numbers of elements like [obj], [obj1, obj2], [objA, objB, objC], [objN], etc. The data displayed is filtered based on user-selected criteria1 and criteria2 radio buttons. The aim is for the table to reflect this filtering. When trying to use *ngFor with
totalColumnsOfTheTable = row.lengthI attempted using trackBy but found that referring to ‘component’ as
this.totalColumnsOfTheTable = index*ngFor loop. Any assistance or suggestions on the approach would be greatly appreciated.