再次單擊時還原元素的背景色

Question

使用Angular 2時，我有一個帶有條紋行的表格，當我單擊一行時，它變成綠色，一次只能有一行綠色。我想添加這樣的功能，即如果再次單擊當前點擊的行（變爲綠色），它將恢復爲最初被點擊之前的顏色。現在，如果點擊不同的行，只有一行將恢復爲其原始顏色。沒有任何行

表點擊：

表被點擊第二行時：

HTML灰色是＃d3d3d3。綠色是＃015939：

<tr *ngFor="let dPoint of theData; let idx=index; let even=even" (click)="onClick(dPoint, idx)" (row)="received($event)" id="{{dPoint.tDataPoint}}" 
     [style.backgroundColor]="clickedRow == idx ? '#015939' : (even ? 'white' : '#d3d3d3')" [style.color]="clickedRow == idx ? 'white' : '#015939'"> 
    <td>{{dPoint.tDataPoint}}</td> 
    <td>{{dPoint.tICCP}}</td> 
    <td>{{dPoint.tStartDate}}</td> 
    <td>{{dPoint.tEndDate}}</td> 
</tr> 

打字稿：

onClick(message:DataTable, idx:any){ 
    this.clickedRow = idx; 
    //more code that isn't relevant to this functionality 
} 

Answer 1

只需設置idx到一個不存在的索引可以使沒有行選擇：

onClick(message:DataTable, idx:any){ 
    if(this.clickedRow == idx) { 
    this.clickedRow = -1; 
    } else { 
    this.clickedRow = idx; 
    } 
    //more code that isn't relevant to this functionality 
}