angular - 以角度单击时突出显示表格行
问题描述
<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
}
推荐阅读
- reinforced-typings - 如何在不创建无效导入的情况下引用外部库类型
- python-3.x - 如何使用 python 脚本将用户在我的网站上上传的文件存储到 azure 上?
- r - 如何在 R 中使用 smotefamily 处理分类变量?
- javascript - CryptoJS 说 Crytpo.js 文件未找到错误
- oracle-sqldeveloper - sqldeveloper 加载数据库内容的时间太长
- java - 如何实现搜索按钮到 android Firebase 数据库?
- php - 我有一个功能,我想使用自定义插件中的函数添加到 single.php 页面中。我怎样才能?
- tensorflow - UnsatisfiableError:冲突 - keras-gpu - tensorflow-base
- botframework - 如何访问从 Microsoft 示例 (bot-builder-samples) 部署的机器人
- node.js - EJS - 如何将锚标签链接到外部网站?