primeng을 사용할 수 없습니다 가상 스크롤 지연로드

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은 스크롤하는 데 아무런 영향을 미치지 않습니다.

나는 이미 비슷한 question가 있지만 여전히 답을 알고 있습니다.

누군가가 게으른로드로 가상 스크롤을 성공적으로 사용 했습니까? 어떤 제안이 유용 할 것입니다.

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> 

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>