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

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;
                    }
                });
        });
    });