PrimeNG TurboTable-奇怪的虚拟滚动行为-使event.rows保持两倍

Question

我已经实现了使用PrimeNG TurboTable和NgRx的自定义Grid组件，并使用内置的TurboTable虚拟滚动条为其添加了虚拟滚动条功能。这也是带有onLazyLoad处理程序的延迟加载。但是，onLazyLoad在滚动网格结果时调用时，会出现这种奇怪的行为。

onLazyLoad called with event.first=0 and event.rows=40
onLazyLoad called with event.first=0 and event.rows=80
onLazyLoad called with event.first=0 and event.rows=160
onLazyLoad called with event.first=0 and event.rows=320
onLazyLoad called with event.first=0 and event.rows=640
onLazyLoad called with event.first=0 and event.rows=1280

所以有两个问题：

1. event.first 始终保持0
2. event.rows 不断增加到很高的值

我以为这是PrimeNG中的错误，但是当我尝试使用简单的StackBlitz重现它时，它的行为就正确了。 https://stackblitz.com/edit/github-primeng-virtualscroll-issue

我在StackBlitz上看到了这一点：

loadDataOnScroll is called with event.first=0 and event.rows=40
loadDataOnScroll is called with event.first=20 and event.rows=40
loadDataOnScroll is called with event.first=40 and event.rows=40
loadDataOnScroll is called with event.first=80 and event.rows=40
loadDataOnScroll is called with event.first=120 and event.rows=40

因此，event.rows保持应有的恒定并event.first正常增加。

看起来是什么原因触发了我使用TurboTable的方式，但是我不知道是什么。可能是什么问题？这是我的网格组件中的相关代码：

延迟加载处理程序：

onLazyLoad(event: LazyLoadEvent) {
    // TODO - In this StackBlitz it behaves correctly
    // https://stackblitz.com/edit/github-primeng-virtualscroll-issue
    console.log(
        `onLazyLoad called with event.first=${event.first} and event.rows=${
            event.rows
        }`
    );

    // TODO - This state should be handled by NgRx as well.
    this.loading = true;
    this.filters = {};

    const hasPagination = this.settings.features.Pagination;

    // TODO - Tweak the behavior of virtual scroll skipCount/maxResultCount
    // based on testing results.
    // The default behavior is a bit strange, skipCount is always 0
    // and maxResultCount keeps getting doubled.
    let pageSize = event.rows ? event.rows : GridConfig.PageSize;
    this.filters.maxResultCount = pageSize;
    this.filters.skipCount = event.first ? event.first : 0;
    this.filters.ignorePagination = !hasPagination;

    if (event.sortOrder && event.sortField) {
        const sortingDirection = event.sortOrder > 0 ? 'ASC' : 'DESC';
        this.filters.sorting = event.sortField + ' ' + sortingDirection;
    }

    if (event.globalFilter) {
        this.filters.filter = event.globalFilter;
    }

    if (event.filters) {
        this.filters.columnFilters = this.buildColumnFilters(event.filters);
    }

    this.filters.parentFilters = this.parentFilters; // this works only with client-side caching & filtering

    if (this.settings.features.ClientSideCaching) {
        // Load only once
        this.gridLoaded().subscribe(loaded => {
            if (loaded) {
                this.store.dispatch(
                    new this.settings.stateActions.FilterClientSide(
                        this.filters
                    )
                );
            }
        });
    } else {
        this.store.dispatch(
            new this.settings.stateActions.Read(this.filters)
        );
    }
}

我在模板中传递的参数：

<p-table
        #dataTable
        [value]="(data$ | async)?.items"
        [loading]="loading"
        [lazy]="true"
        [virtualScroll]="!settings.features.Pagination"
        [virtualRowHeight]="35"
        [scrollable]="!settings.features.Pagination"
        (onLazyLoad)="onLazyLoad($event)"
        [autoLayout]="true"
        [columns]="selectedColumns"
        [paginator]="settings.features.Pagination"
        scrollHeight="400px"
        [resizableColumns]="true"
        [rowsPerPageOptions]="[10, 20, 30]"
        [totalRecords]="(data$ | async)?.totalCount"
        [rows]="(this.settings.states.Search | async)?.maxResultCount"
        [stateStorage]="this.settings.persistence?.stateStorage"
        [stateKey]="this.settings.persistence?.stateKey"
        [(selection)]="selectedRows"
        [selectionMode]="this.settings.rowSelection?.selectionMode || null"
        (onRowSelect)="onRowSelect($event)"
        [dataKey]="this.settings.rowSelection?.dataKey || null"
    >

任何帮助或想法将不胜感激！谢谢！

Answer 1

问题发生的原因event.rows是它持续存在于 NgRx 存储中，我在构建过滤器时重复使用它，每次onLazyLoad被调用时它都会加倍。

这里我rows使用 NgRx 存储值进行初始化：

[rows]="(this.settings.states.Search | async)?.maxResultCount"

然后onLazyLoad我在里面使用event.rows：

let pageSize = event.rows ? event.rows : GridConfig.PageSize;
this.filters.maxResultCount = pageSize;

PrimeNGevent.rows的虚拟滚动代码加倍，当我调用操作时，它会持久保存到 NgRx 存储中FilterClientSide。然后模板获得该新值，随后onLazyLoad它再次加倍。

对我有用的解决方案是为此设置一个常量：

if (this.settings.features.VirtualScroll) {
    pageSize = GridConfig.PageSize * 2;
} else {
    pageSize = event.rows ? event.rows : 10;
}