骁鹏p-虚拟滚动条空列表项和滚动条问题。

问题描述 投票:0回答:1

我使用primeng p-virtualScroller来实现用滚动器加载数据,工作正常,但我遇到了以下问题:当搜索结果较少时,仍然显示滚动器和emplty列表项,以下是我使用的Html代码。

 <p-virtualScroller  [(value)]="employeeList" scrollHeight="300px" [itemSize]="20" [rows]="pageSize"
            [(lazy)]="lazyLoading" (onLazyLoad)="loadCarsLazy($event)" [(totalRecords)]="totalEmployees">

            <ng-template let-emp pTemplate="emptymessage" *ngIf="searchResultMsg">
                <span>{{searchResultMsg}}</span>
            </ng-template>
            <ng-template let-emp pTemplate="item" let-odd = odd  *ngIf="searchResultMsg===''">
                <div (click)="selectEmployee(emp)" class="pl-2 search-list"  [class.odd-row]="odd">{{emp.name}} </div>

            </ng-template>

        </p-virtualScroller>

下面是我想解释的问题(见截图)。enter image description here

primeng angular-cdk-virtual-scroll
1个回答
0
投票

我得到了解决上述问题的方法。我根据API(COUNT)返回的总记录更新pageSize变量的值。

准则:

  callAPIToSearch(searchValue, rowOffset) {
if (!this.isProcessing) {
  this.isProcessing = true;
  this.empService.searchEmployees(searchValue, rowOffset, this.pageSize).subscribe((apiResp: EmployeeSearchAPIResponse) => {
    if (rowOffset == 0 && apiResp.response.COUNT === 0) {
      this.searchResultMsg = `No record found, Please enter Relationship Manager's Surname and try again.`;
    } else {
      this.totalEmployees = apiResp.response.COUNT;
      if (apiResp.response.COUNT <= 100) {
        this.pageSize = apiResp.response.COUNT
      } else{
        this.pageSize =100;
      }
      this.employeeList = apiResp.response.employees;
    }
    this.isProcessing = false;
  })
} }
© www.soinside.com 2019 - 2024. All rights reserved.