css - 无论滚动位置如何，突出显示虚拟滚动表中的行

Question

我一直在寻找这个问题的答案，但一无所获。我在 angular4 堆栈中有一个虚拟滚动表，有数百行。我创建了一个函数来突出显示单击时的一行并且它正在工作，但是因为它是一个虚拟滚动，所以突出显示在滚动后转移到相同的虚拟位置，无论滚动位置如何，我都希望它与特定行一起使用。不确定这是否可以通过虚拟表实现，但希望有一些想法。谢谢！

组件.ts

    onRowSelected(index: any) {
    this.selectedRow = index;
  }

.html

<tr *ngFor="let row of viewPortItems; let rowIdx = index" (click)="onRowSelected(rowIdx)" [class.active]="rowIdx === selectedRow">
                    <ng-container *ngFor="let dataItem of row; let i = index;">

.css

.table tr.active td {
    background-color: #5bc0de;
    color: azure
}

Answer 1

是否可以在行上使用属性而不是行索引？

即假设row.dataItem有一些唯一的密钥dataItemKey

onRowSelected(key: any) {
    this.selectedKey = key;
}

.html

<tr *ngFor="let row of viewPortItems" (click)="onRowSelected(row.dataItem.dataItemKey)" [class.active]="row.dataItem.dataItemKey === selectedKey">
    <ng-container *ngFor="let dataItem of row; let i = index;">