突出显示所选行突出显示所有行

Question

我想要它，所以当我选择一行表时，它会突出显示所选行。目前，如果我选择一行，它会突出显示所有行。这是它的样子：

这是我使用的HTML代码：

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters">
    <td [ngClass]="{'highlight': selectedRowIndex == row}"
        (click)="highlight(row.index)">
        {{filter.viewType | filter: filterTypes }}
    </td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>

这是CSS代码：

.highlight {
  background: green;
}

最后是角度代码：

highlight(row) {
    this.selectedRowIndex = row;
}

如何才能使其仅突出显示所选内容。当选择不同的一个时，它也需要取消突出显示。

Answer 1

把它改成下面的代码，它会起作用;

<table class="table table-sm table-hover table-borderless">
 <tr *ngFor="let filter of pagedFilters">
  <td [ngClass]="{'highlight': selectedRowIndex == row.index}"
    (click)="highlight(row.index)">
    {{filter.viewType | filter: filterTypes }}
  </td>
  <td>
   <a><i class="oi oi-list" ></i></a>
   </td>
 </tr>
</table>

希望能帮助到你。