Angular 4 Material 表高亮显示一行 [英] Angular 4 Material table highlight a row
本文介绍了Angular 4 Material 表高亮显示一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种在 md-table
中突出显示整行的好方法.
我应该做指令还是什么?
<md-table #table [dataSource]=dataSource"><!--- 请注意,这些列可以按任何顺序定义.实际呈现的列被设置为行定义"的属性.--><!-- ID 列--><ng-container cdkColumnDef=userId"><md-header-cell *cdkHeaderCellDef>ID</md-header-cell><md-cell *cdkCellDef=让行">{{row.id}} </ng-容器><!-- 进度栏--><ng-container cdkColumnDef="progress"><md-header-cell *cdkHeaderCellDef>进度 </md-header-cell><md-cell *cdkCellDef=让行">{{row.progress}}% </ng-容器><!-- 名称列--><ng-container cdkColumnDef="userName"><md-header-cell *cdkHeaderCellDef>名称</md-header-cell><md-cell *cdkCellDef=让行">{{row.name}} </ng-容器><!-- 颜色列--><ng-container cdkColumnDef=颜色"><md-header-cell *cdkHeaderCellDef>颜色</md-header-cell><md-cell *cdkCellDef=让行"[style.color]=row.color">{{row.color}} </md-cell></ng-容器><md-header-row *cdkHeaderRowDef=displayedColumns"></md-header-row><md-row *cdkRowDef="let row;列:displayedColumns;"></md-row></md-table>
表格来自:https://material.angular.io/components/table/overview一个>
解决方案
更新材料版本 (md --> mat):
html:
<!-- 添加点击事件传递选中的行索引--><mat-row *cdkRowDef="let row;列:displayColumns;"[ngClass]="{'highlight': selectedRowIndex == row.id}";(点击)=突出显示(行)"></mat-row>
原答案:
您可以通过使用 ngClass
和像 selectedRowIndex
这样的标志来实现.每当单击的行索引等于 selectedRowIndex
时,将应用该类.
html:
<!-- 添加点击事件传递选中的行索引--><md-row *cdkRowDef="let row;列:displayColumns;"[ngClass]="{'highlight': selectedRowIndex == row.id}";(点击)=突出显示(行)"></md-row>
CSS:
.highlight{背景:#42A948;/* 绿色 */}
ts:
selectedRowIndex = -1;突出显示(行){this.selectedRowIndex = row.id;}
I'm looking for a good way to highlight the whole a row in md-table
.
Should I do directive or what?
<div class="example-container mat-elevation-z8">
<md-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>
<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
</ng-container>
<!-- Color Column -->
<ng-container cdkColumnDef="color">
<md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
</div>
Table from: https://material.angular.io/components/table/overview
解决方案
Update for Newer Material Version (md --> mat):
html:
<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->
<mat-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</mat-row>
Original Answer:
You can do it by using ngClass
and a flag like selectedRowIndex
. Whenever clicked row index is equal to selectedRowIndex
, the class will be applied.
html:
<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->
<md-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</md-row>
css:
.highlight{
background: #42A948; /* green */
}
ts:
selectedRowIndex = -1;
highlight(row){
this.selectedRowIndex = row.id;
}
这篇关于Angular 4 Material 表高亮显示一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文