如何在mdtable角度材質中點擊行添加左邊框2

Question

我在我的項目中使用angular material2。我已經使用了table組件。我想將左邊框添加到表格的當前單擊行中。

有我可以使用的懸停和活動選擇器。但是，只有當行處於活動狀態時，活動選擇器纔會保持邊框，這只是鼠標處於單擊狀態時的時間。但即使用戶釋放鼠標，我也想添加它。我怎樣才能做到這一點？

Answer 1

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

我在row.id與selectedRowIndex匹配時，添加了一個ngClass以顯示highlight類。此外，還添加了一個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