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

我正在我的项目中使用。我已经使用了组件。我只想将左边框添加到表的当前单击行

我可以使用悬停和活动选择器。但活动选择器仅当行处于活动状态时（即鼠标处于单击状态时）才保留边框。但我想添加它，即使用户释放鼠标。如何实现这一点？

允许将

类

和

事件

添加到整行

我在其中添加了一个

ngClass

，以在

row.id

与

selectedRowIndex

匹配时显示

高亮显示
类。此外，还添加了一个
单击
事件，将行信息传递给组件，以设置
selectedRowIndex

Html:

css:

允许将
类
和
事件
添加到整行

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

Html:

css:

检查示例，谢谢！！我没有使用jquery。。还有其他方法吗？css不能这样做，所以您可以使用这个概念来创建任何其他脚本语言，因为我使用jquery:）检查示例，谢谢！！我没有使用jquery。。还有其他方法吗？css不能这样做，所以您可以使用这个概念来创建任何其他脚本语言，因为我使用jquery:）如果我的数据中没有ID这样的东西，我能用某种内置行标识符来标识行吗？如果我的数据中没有ID这样的东西，我能用某种内置行标识符来标识行吗？
<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;
}

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