Question

我想要它，所以当我选择表格的一行时，它会高亮显示所选的行。当前，如果我选择一行，它将突出显示所有行。看起来像这样： http://topepo.github.io/caret/available-models.html

问题是，当我在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;
}

角度代码：

selectedRowIndex: number = -1;

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

Answer 1

您可以通过传递索引来执行以下操作：这是一个有效的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>

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

1 个答案: