如何使用angular2在p表中使用惰性加载+分页+排序+过滤器

Question

我有一个p表，在我的应用程序中我正在使用lazyload，pagination，sort和filter。 我设法使工作排序，过滤以及延迟负载。现在我的问题是分页。

相应地加载项目，例如。我有3页数据，所以我总共有30页。 如果我要排序或过滤数据，那么它不会显示3页，而只会显示我尝试对其进行排序的那一页数据。其余2页不会显示。在分页中，我得到1，分别是1,2,3。

需要帮助。

HTML：

<p-table [columns]="tableHeaders" [value]="listEmrAllergy " [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)"
    [totalRecords]="totalcount" [lazy]="!press" #tt [globalFilterFields]="tableHeaders">
    <ng-template pTemplate="caption">
      <div style="text-align: right">
        <label>Search:</label>
        <input type="text" pInputText size="25" (keypress)="press=true" [ngModel]="alpha" (ngModelChange)="searchCheck($event)" class="filter"
          style="width:auto" (input)="tt.filterGlobal($event.target.value, 'contains')" autocomplete='off'>
      </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order">sooort</p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

TS：

    public searchCheck(evt) {
        evt.length > 0 ? this.press = true :
          setTimeout(() => {
            this.press = false
          }, 400);
      }

      public loadLazy(LazyLoadEvent) {
        console.log(LazyLoadEvent);
        const count = (LazyLoadEvent.first + 10) / 10;
        this.pageNo = Math.ceil(count);
        if (LazyLoadEvent.sortField) {
          this.sort(LazyLoadEvent.sortField, LazyLoadEvent.sortOrder);
        }
        else {
          this.interactionHistories;
        }
      }


      private sort(fieldName: string, order: number) {
        this.listEmrAllergy.sort((row1, row2) => {
          const val1 = row1[fieldName];
          const val2 = row2[fieldName];
          if (val1 === val2) {
            return 0;
          }
          let result = -1;
          if (val1 > val2) {
            result = 1;
          }
          if (order < 0) {
            result = -result;
          }
          return result;
        });
      }

 private getEmrAllergyList() {
let params = { 'Id': this.userId, PageNo: this.pageNo, PageSize: 10 }
this.emrService.getEmrAllergy(params)
  .subscribe(allergyLists => {
    this.listEmrAllergy = allergyLists.Body.Data.Items;
    this.totalcount = allergyLists.Body.Data.TotalItemCount;
    console.log(this.listEmrAllergy);
  })
    this.emrNavigation.getTotalList();

}