我使用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>
我得到了解决上述问题的方法。我根据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;
})
} }