再次单击时还原元素的背景颜色

Question

使用Angular 2，我有一个带有条纹行的表，当我单击一行时，它变为绿色，一次只有一行可以是绿色。我想添加一个功能，如果再次单击当前单击的行（变为绿色），它将恢复为最初单击之前的颜色。现在，如果单击另一行，则行只会恢复为原始颜色。

没有点击任何行的表格：

单击第二行时的表：

HTML grey是＃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
}