Angular6 multiple ngFor for single row - How to pass two values in one ngFor

Viewed 874

In table head I have dynamic columns and search sorting functions. but for particular columns I need to disable sorting function. In table

<thead>
      <tr class="table-head">
        <th *ngFor="let colName of reportColHeader; let i = index">
          {{colName}}
          <i [class]="sortIcons[colName]" (click)="toggleSort(colName, i)"></i>
        </th>
      </tr>
    </thead>

In constructor I have passing values as array. Not from server its static only

this.reportColHeader = ['ID', 'LABEL 1', 'LABEL 2', 'More'];

so the result will be like below

<tr>
 <th>ID <i></i></th>
 <th>LABEL 1 <i></i></th>
 <th>LABEL 2 <i></i></th>
 <th>More <i></i></th>
</tr>

Here I want to disable (sorting function) from particular column.
Not only last column or nth column. My assumption is, is possible to have one more array like

this.reportColHeaderOptions = ['true', 'true', 'false', 'false'];

by this values can show or hide the <i></i>
So how can I pass this inside ngFor.
Note: here I can't use index since the index will change.
but I can follow this.reportColHeader and this.reportColHeaderOpions in same order.

1 Answers

Why can't you use index ? You can do this :

    <th *ngFor="let colName of reportColHeader; let i = index">
      {{colName}}
      <i *ngIf="reportColHeaderOpions[i]=='true'"></i>
    </th>
Related