Hintergrundfarbe des Elements wiederherstellen, wenn erneut darauf geklickt wird

Question

Mit Angular 2 habe ich eine Tabelle mit gestreiften Zeilen. Wenn ich auf eine Zeile klicke, wird sie grün und nur eine Zeile kann grün sein. Ich möchte die Funktionalität hinzufügen, dass, wenn auf eine Zeile, auf die gerade geklickt wird (grün dargestellt), erneut geklickt wird, sie auf die Farbe zurückkehrt, die sie vor dem ursprünglichen Klicken war. Im Moment wird eine Zeile nur dann wieder auf die ursprüngliche Farbe zurückgesetzt, wenn auf eine andere Zeile geklickt wird.

Tabelle ohne Zeilen angeklickt:

Tabelle, wenn die zweite Reihe angeklickt wird:

HTML Gray # d3d3d3 ist. Grün ist # 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> 

Typoskript:

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

Answer 1

Nur idx zu einem nicht vorhandenen Index auf keine Zeile machen ausgewählt:

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 
}