简体   繁体   中英

Can I get the index of a header cell for an angular material table?

Can I replace [0] with the actual index of the header cell within the table?

something like [ngClass]="{'highlight':highlightedRows [this.elem.cellIndex] }"

Here is the code

<ng-container matColumnDef="position">
    <th mat-header-cell 
      *matHeaderCellDef
      (click)="highlightColumn($event)"
      [ngClass]="{'highlight':highlightedRows[0]}"
    > No.</th>
    <td mat-cell *matCellDef="let element"
    [ngClass]="{'highlight':highlightedRows[0]}"

    > {{element.position}} </td>
  </ng-container>

Thank you

change the to this:

*matCellDef="let element; let i = index;"

Then, you can use i in place of the 0.

I think that You need redesign You table and use something like this. Create columns using *ngFor

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay, let i = index">
     <th mat-header-cell *matHeaderCellDef> {{column}} {{i}}</th>
     <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

More You make find here https://material.angular.io/components/table/examples in expandable table

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM