如何让虚拟滚动和分页一起工作primeng

Question

我有一个场景，我需要在 primeng 数据网格中一次显示 150 条记录，但它在 50 条记录后开始冻结，因为在我的网格中，我有 18 列，所以它占用了大量内存，并且还附加了许多事件行。因此，我需要一个虚拟滚动来实现此目的，但我无法使虚拟滚动和分页在网格中一起工作。如果我尝试自定义数据表代码，也会带来很多副作用。如果有人提出这样的解决方案，那将非常有帮助。下面是我尝试过的代码，但它带来了性能问题：

let element = this.elRef.nativeElement.querySelector('.ui-datatable-scrollable-body');
    this.zone.runOutsideAngular(() => {
        Observable.fromEvent(element, 'scroll')
            .debounceTime(20)
            .subscribe(res => {
                this.zone.run(() => {
                    let position = 0;
                    if (this.rowsCountPerPage > 10 && this.rowsCountPerPage > this.manualProcessGridData.length) {
                        let el = this.elRef.nativeElement.querySelector('.ui-datatable-scrollable-body');
                        let scroll = el.scrollTop;
                        if (el.scrollTop >= (el.scrollHeight - el.offsetHeight) * 0.7) {
                            if (scroll > position) {
                                let loopLength = this.lastElementInGrid + 10;
                                let loopStart = this.lastElementInGrid;
                                for (let i = loopStart; i <= loopLength; i++) {
                                    if (typeof this.docproData[i] !== 'undefined') {
                                        this.manualProcessGridData = [...this.manualProcessGridData, this.docproData[i]];
                                    }
                                    if (loopLength === i) {
                                        this.lastElementInGrid = i + 1;
                                    }
                                    if (i >= this.docproData.length) {
                                        break;
                                    }
                                }
                            }
                        }
                        position = scroll;
                    }
                });
        });
    });

Answer 1

不要在表中将虚拟滚动的值指定为 true 或 false，而是使用可以在 .ts 文件中处理的标志。

您可以将虚拟滚动标志设置为 false（少于 50 条记录）和 true（超过 150 条记录）。