无论滚动位置如何，都在虚拟滚动 table 中突出显示行

Question

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

component.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;">

无论滚动位置如何，都在虚拟滚动 table 中突出显示行

Highlight row in virtual scroll table no matter scroll position

css

typescript

angular

virtualscroll