[英]How to add left border on click of row in mdtable angular material2
I am using angular material2 in my project. 我在我的项目中使用了角材质2 。 I have used the table component.
我已经使用了表格组件。 I want to add the left border to current clicked row only of the table.
我只想将左边框添加到表的当前单击的行中。
There are hover and active selectors that I can use. 我可以使用悬停和活动选择器。 But active selector keeps border only if the row is active that is only the time while the mouse is in clicked state.
但是活动选择器仅在行处于活动状态时才保留边框,只有当鼠标处于单击状态时才行。 But I want to add it even if the user releases the mouse.
但是,即使用户释放鼠标,我也想添加它。 How can I achieve that?
我该如何实现?
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
allows to add class
and event
to the whole row. <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
允许在整个行中添加class
和event
。
I added a ngClass
in it to show highlight
class when row.id
matches with the selectedRowIndex
. 我加了
ngClass
在它显示highlight
上课的时候row.id
与匹配selectedRowIndex
。 Also, added a click
event to pass the row information to the component to set the selectedRowIndex
. 另外,添加了
click
事件,以将行信息传递给组件以设置selectedRowIndex
。
Html: HTML:
<md-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</md-row>
component: 零件:
selectedRowIndex: number = -1
highlight(row){
// console.log(row);
this.selectedRowIndex = row.id;
}
css: CSS:
.highlight{
border-left: 5px solid #42A948; /* green */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.