在Angular中,要实现在单击时突出显示表行,可以通过以下步骤进行操作:
<table>
<tr *ngFor="let item of items" (click)="highlightRow(item)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
selectedRowIndex: number;
highlightRow(item: any) {
this.selectedRowIndex = item.id;
}
<table>
<tr *ngFor="let item of items; let i = index"
(click)="highlightRow(item)"
[ngClass]="{'highlight': i === selectedRowIndex}">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
.highlight {
background-color: yellow;
}
通过以上步骤,当用户在Angular应用中单击表格的某一行时,该行将突出显示,以提供视觉反馈。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云