[英]Highlight specific line in Angular Material Table
I have a angular material table:我有一张angular材料表:
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef>Index</th>
<td mat-cell *matCellDef="let element"> {{element.index}} </td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef>Time</th>
<td mat-cell *matCellDef="let element"> {{element.Time}} </td>
</ng-container>
<ng-container *ngFor="let quantity of quantities" >
<ng-container [matColumnDef]="quantity.name">
<th mat-header-cell *matHeaderCellDef>{{quantity.name}}</th>
<td mat-cell *matCellDef="let element"> {{element[quantity.name]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>
and I want to highlight specific line when I click a button in my screen.当我单击屏幕上的按钮时,我想突出显示特定的行。 I tried to find a solution on the web and I didn't find any way to do that.我试图在 web 上找到解决方案,但没有找到任何方法。 If that possible?如果可能的话?
Thank you very much for your help and have a nice day,非常感谢您的帮助,祝您有美好的一天,
Amit.阿米特。
Do something like this:做这样的事情:
<tr mat-row *matRowDef="let row; columns: columns;" [class.highlight]="row.field===specificLine"></tr>
And in the component's style flie:在组件的样式中:
tr.highlight { background-color: red; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.