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

Question

我正在使用 angular material2在我的元素中。我用过 table成分。我只想将左边框添加到表格的当前单击行。

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

Answer 1

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

我添加了一个 ngClass在其中显示highlight上课时 row.id与 selectedRowIndex 匹配.另外，添加了一个 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