用于突出显示所选行的行索引

Question

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

问题是，当我在 html 中使用 row.index 时，它不起作用。它说它不识别索引。我怎样才能让它工作？

HTML代码：

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

CSS代码：

.highlight {
  background: green;
}

Angular代码：

selectedRowIndex: number = -1;

showForEdit(filter: Filter, row) {
    this.selectedFilterChange.emit(filter);
    this.selectedRowIndex = row;
}

Answer 1

使用索引而不是行..

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

Answer 2

您可以通过传递索引来执行以下操作：这是一个工作 stackbliz

https://stackblitz.com/edit/angular-bskjjr

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

用于突出显示所选行的行索引

Row Index for highlighting selected row

html

css

indexing

selected

angular