无法使用 primeng <p-datatable> 虚拟滚动延迟加载

Question

我正在尝试使用 primeng 对大量数据实现延迟加载<p-datatable>。我已经完成了官方网站上记录的所有内容，但是我无法使其工作。

回调onLazyLoad仅在加载表时运行一次。它不会按预期在每次滚动时触发。

<div style="max-height:300px; border:1px solid black;overflow-y:auto">
      <p-dataTable #pocListref [value]="data" rowHover="true" [(selection)] = "selectedData" scrollable="true" scrollHeight="200px" [rows]="4"
      [style]="{'margin-top':'30px'}"  [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
        [lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="lazyLoad($event)">
        <p-column header="Id">
        <ng-template pTemplate="body" let-index="rowIndex">
            {{index}}
        </ng-template>
        </p-column>
        <p-column  selectionMode="multiple" [style]="{'width':'5%'}"></p-column>
        <p-column field="name" header="Name"[sortable]="true"></p-column>
        <p-column field="age" header="Age" [sortable]="true"></p-column>
        <p-column field="company" header="Company" [sortable]="true"></p-column>
      </p-dataTable>
  </div>

对于分页器实现来说，同样可以正常工作。我注意到，仅当我不使用属性时，它才适用于分页器virtualScroll，这是有道理的，但不知何故 virtualScroll 不会对滚动产生任何影响。

我知道已经有类似的问题，但仍然得到回答。

有人成功使用虚拟滚动和延迟加载吗？任何建议都会有用的。

Answer 1

试试我的例子：

这是我的更新代码，没有分页器并使用 virtualScroll

<p-dataTable [value]="resultsArr" scrollable="true" scrollHeight="100px" [rows]="4" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}" [lazy]="true" [totalRecords]="results.length" (onLazyLoad)="lazyLoad($event)">
<p-column header="Id">
<ng-template pTemplate="body" let-index="rowIndex">
    {{index}}
</ng-template>
</p-column>
<p-column  selectionMode="multiple" [style]="{'width':'5%'}"></p-column>
<p-column field="name" header="Name"[sortable]="true"></p-column>
<p-column field="age" header="Age" [sortable]="true"></p-column>
<p-column field="company" header="Company" [sortable]="true"></p-column>
</p-dataTable>

组件.ts

export class Component {
    private results: Array<any> = []; // have 15+ objects in this array
    private resultsArr: Array<any> = [];

constructor() {
    this.results = [{
        name: "david",
        age: 26,
        company: "XYz Company"
    }, {
        name: "david",
        age: 26,
        company: "XYz Company"
    }, {
        name: "david",
        age: 26,
        company: "XYz Company"
    }, {
        name: "david",
        age: 26,
        company: "XYz Company"
    }, {
        name: "david",
        age: 26,
        company: "XYz Company"
    }, {
        name: "david",
        age: 26,
        company: "XYz Company"
    }]
}

    lazyLoad(event: any) {
        setTimeout(() => {
            if (this.results) {
                this.resultsArr = this.results.slice(event.first, (event.first + event.rows));
            }
        }, 250);
    }
}

组件.html

<p-dataTable [value]="resultsArr" [lazy]="true" [totalRecords]="results.length" [responsive]="true"
             [paginator]="true" (onLazyLoad)="lazyLoad($event)" [rows]="5" [filterDelay]="500"
             [rowsPerPageOptions]="[5,10,20]" sortField="first_name" [sortOrder]="1">
  <p-column field="id" header="#" [sortable]="true" styleClass="columnId" [filter]="true"></p-column>
  <p-column field="first_name" header="First Name" [sortable]="true"></p-column>
  <p-column field="last_name" header="Last Name" [sortable]="true"></p-column>
</p-dataTable>