mdtable角度material2の行のクリックに左の枠線を追加する方法

Question

私のプロジェクトでangular material2を使用しています。私はtableコンポーネントを使用しました。私は、テーブルの現在のクリックされた行にのみ、左の枠線を追加したいと思います。

私が使用できるホバーセレクタとアクティブセレクタがあります。しかし、アクティブセレクタは、マウスがクリックされた状態である間だけ、行がアクティブである場合にのみ境界線を維持します。しかし、ユーザーがマウスを離しても追加したいと思います。それをどうすれば実現できますか？

Answer 1

<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>は、行全体にclassとeventを追加することを許可します。

row.idがselectedRowIndexと一致したときにhighlightクラスを示すように、ngClassを追加しました。また、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