如何在 mdtable angular material2 中单击行添加左边框

Question

我正在使用 angular material2 in my project. I have used the table 组件。我只想将左边框添加到 table.

的当前单击行

我可以使用悬停和活动选择器。但是只有当行处于活动状态时，活动选择器才会保留边框，这只是鼠标处于单击状态时的时间。但即使用户释放鼠标，我也想添加它。我怎样才能做到这一点？

Answer 1

<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 允许将 class 和 event 添加到整行。

我在其中添加了一个 ngClass 以在 row.id 与 selectedRowIndex 匹配时显示 highlight class。此外，添加了一个 click 事件以将行信息传递给组件以设置 selectedRowIndex。

Html:

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</md-row>

组件：

selectedRowIndex: number = -1

highlight(row){
  // console.log(row);
  this.selectedRowIndex = row.id;
}

css:

.highlight{
  border-left: 5px solid #42A948; /* green */
}

Plunker demo

如何在 mdtable angular material2 中单击行添加左边框

How to add left border on click of row in mdtable angular material2

html

javascript

css

angular-material2