无法使用primeng< p-datatable>虚拟滚动延迟加载 [英] Unable to use primeng <p-datatable> virtual scroll lazy load

问题描述

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

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

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

在分页器实现中同样可以正常工作.我已经注意到，只有当我不使用 virtualScroll 属性时，它才可以与分页器一起使用，这是有道理的，但是在某种程度上，virtualScroll对滚动没有任何影响.

我知道已经有一个类似的问题，但仍得到回答./p>

有人通过延迟加载成功使用了虚拟滚动.任何建议都会有用.

解决方案

请尝试以下示例:

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

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

component.ts

 导出类Component {私人结果:Array< any>= [];//此数组中有15个以上的对象私有结果错误:Array< any>= [];Constructor(){this.results = [{名称:大卫"，年龄:26岁公司:"XYz公司"}，{名称:大卫"，年龄:26岁公司:"XYz公司"}，{名称:大卫"，年龄:26岁公司:"XYz公司"}，{名称:大卫"，年龄:26岁公司:"XYz公司"}，{名称:大卫"，年龄:26岁公司:"XYz公司"}，{名称:大卫"，年龄:26岁公司:"XYz公司"}]}lazyLoad(event:any){setTimeout(()=> {如果(this.results){this.resultsArr = this.results.slice(event.first，(event.first + event.rows));}}，250)；}} 

component.html

 < p-dataTable [value] ="resultsArr" [惰性] ="true" [totalRecords] ="results.length" [响应] ="true"[paginator] ="true"(onLazyLoad)="lazyLoad($ event)" [rows] ="5" [filterDelay] ="500"[rowsPerPageOptions] ="[5,10,20]" sortField ="first_name" [sortOrder] ="1">< p-column field ="id"标头=#" [sortable] ="true" styleClass ="columnId" [filter] ="true"></p-column>< p-column field ="first_name" header =名字" [sortable] ="true"></p-column>< p-column field ="last_name" header =姓氏" [sortable] ="true"></p-column></p-dataTable> 

I am trying to implement a lazy load for a large set of data with primeng <p-datatable>. I have done everything documented on the official site, however I could not make it work.

The onLazyLoad callback runs only once at the time of loading the table. It doesn't trigger on each scroll as expected.

<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>

The same works fine with the paginator implementation. I have noticed that it works with paginator only if I do not use virtualScroll attribute, which makes sense, but somehow virtualScroll doesn't make any effect on scrolling.

I know there is already a similar question but it is still answered.

Has someone used the virtual scroll successfully with lazy loading. Any suggestions will be useful.

解决方案

Try like this my example :

here is my updated code without paginator and using 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>

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

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

这篇关于无法使用primeng< p-datatable>虚拟滚动延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！