html - 检查tr是偶数行还是奇数行以切换条纹表中的背景色

我正试图根据单击时元素的背景色来切换某些元素的背景色。当不使用条带表时，这很简单。从本质上讲，这个表的开头就像下面的截图。如果我单击一行，我想将其更改为if语句中的绿色十六进制颜色，如果我再次单击它，我想将其更改回最初单击之前的颜色。
现在，这将更改任何单击为绿色的行，但再次单击时，无论第一次单击之前是什么颜色，它都将更改为白色：

onClick(message:DataTable, idx:any){
  var rowClicked = <HTMLCanvasElement> document.getElementById(message.tDataPoint);
  var rowColor = rowClicked.style.backgroundColor;
if (idx%2===0 && rowColor === "#015939"){
    rowClicked.style.backgroundColor="white";
    rowClicked.style.color="#015939";
} else if (idx%2===1 && rowColor === "#d3d3d3") {
  rowClicked.style.backgroundColor="#015939";
  rowClicked.style.color="white";
} else if (idx%2===0 && rowColor === "white") {
  rowClicked.style.backgroundColor="#015939";
  rowClicked.style.color="white";
} else if (idx%2===1 && rowColor === "#015939") {
  rowClicked.style.backgroundColor="#d3d3d3";
  rowClicked.style.color="#015939";
 }
}

生成表的HTML：

<tr *ngFor="let dPoint of theData; let idx=index" (click)="onClick(dPoint, idx)" (row)="received($event)" id="{{dPoint.tDataPoint}}">
    <td>{{dPoint.tDataPoint}}</td>
    <td>{{dPoint.tICCP}}</td>
    <td>{{dPoint.tStartDate}}</td>
    <td>{{dPoint.tEndDate}}</td>
</tr>

如果在typescript中有一种方法可以检查行是偶数还是奇数，那么我可以编写适当的if语句来根据它更改颜色。
更新我编辑了我的函数

最佳答案

如果使用*ngFor生成索引，则可以使用这些预定义值Implementing ngClassEven ngClassOdd for angular 2，或者只需单击`

<tr *ngFor="...; let idx=index; let even=even"
    [style.color]="rowClicked == idx ? 'green' : (even ? 'white' : 'grey')"
    (click)="onClick(idx)

onClick(idx) {
  this.rowClicked = idx;
}