以角度方式单击时突出显示表格行

莫哈纳兰甘

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                    <!--- Note that these columns can be defined in any order.
                          The actual rendered columns are set as a property on the row definition" -->
                    
                    
                    <!-- User image  -->
                    <ng-container matColumnDef="imageUrl" class="blue">
                      <th mat-header-cell *matHeaderCellDef></th>
                      <td mat-cell *matCellDef="let element"> <img class="avatar" [src]="element.imageUrl" /> </td>
                    </ng-container>

                    <!-- Position Column -->
                    <ng-container matColumnDef="position">
                      <th mat-header-cell *matHeaderCellDef> User ID </th>
                      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
                    </ng-container>
                  
                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                      <th mat-header-cell *matHeaderCellDef> Name </th>
                      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                    </ng-container>
                  
                    <!-- Weight Column -->
                    <ng-container matColumnDef="weight">
                      <th mat-header-cell *matHeaderCellDef> Delivery Email </th>
                      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
                    </ng-container>
                  
                    <!-- Symbol Column -->
                    <ng-container matColumnDef="symbol">
                      <th mat-header-cell *matHeaderCellDef> Status </th>
                      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
                    </ng-container>
                  
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickEvent()" [class.blue]="classToggled"></tr>
                  </table>

clickEvent(){
    this.showAction = !this.showAction;  
    this.classToggled = !this.classToggled; 
  }

这是我尝试类 Toggle 的表，但它在所有行中都在更改。

芹菜刘

如果只高亮单行项目案例：

<tr mat-row *matRowDef="let row; columns: displayedColumns;let index = index" (click)="clickEvent(index)" [class.blue]="index == cindex"></tr>

cindex: number
clickEvent(index) {
    this.cindex = index
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。