在angular中单击时突出显示表行

<table>
  <tr *ngFor="let item of items" (click)="highlightRow(item)">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>{{ item.gender }}</td>
  </tr>
</table>

selectedRowIndex: number;

highlightRow(item: any) {
  this.selectedRowIndex = item.id;
}

<table>
  <tr *ngFor="let item of items; let i = index" 
      (click)="highlightRow(item)"
      [ngClass]="{'highlight': i === selectedRowIndex}">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>{{ item.gender }}</td>
  </tr>
</table>

.highlight {
  background-color: yellow;
}