PrimeNg TurboTable过滤器不适用于LazyLoad

Question

我无法使用延迟加载选项的过滤器。如果我在这里遗失任何东西，有人可以帮助我吗？

我通过示例阅读了primeng文档this和this以及this。我能找到任何解决方案。

当我同时使用[lazy]和过滤器时，过滤器不起作用。如果我只是从HTML中删除[lazy]="true"将使用过滤器。我如何实现这两个目标？

import { Component, OnInit, Input } from '@angular/core';
import { SelectItem, LazyLoadEvent } from 'primeng/primeng';
import { MyService } from '../services/my.service';
import { ColumnHeaders } from '.';

@Component({
    selector: 'myList-table',
    templateUrl: 'myList-table.component.html',
    styleUrls: ['myList-table.component.less']
})
export class myListTableComponent implements OnInit {
    rowCount = { 'value': 5 };
    totalRecords: number = 0;
    pageNavLinks: number = 0;
    myList: any = [];
    columnHeaders = ColumnHeaders;
    @Input() myListStatus = 'live';
    constructor(private myService: MyService) { }
    ngOnInit() { this.lazyLoad({ 'first': 0 }); }

    lazyLoad(event: LazyLoadEvent) {
        const pageNumber = Math.round(event.first / this.rowCount.value) + 1;
        this.myService.getmyList(this.myListStatus, pageNumber, this.rowCount.value)
            .subscribe(response => {
                this.myList = response.batches;
                this.totalRecords = response.batches[0].TotalRowCount;
                this.pageNavLinks = Math.round(this.totalRecords / this.rowCount.value);
            });
    }

    changeCount() {
        this.totalRecords = 0;
        this.pageNavLinks = 0;
        this.lazyLoad({ 'first': 0 });
    }
}

<div class="ui-g-12">
  <p-table #dt [columns]="columnHeaders" [value]="myList" [paginator]="true" [rows]="rowCount?.value" [totalRecords]="totalRecords" [responsive]="true" (onLazyLoad)="lazyLoad($event)" [lazy]="true">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns">
          <div class="search-ip-table">
            <i class="fa fa-search"></i>
            <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
          </div>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData">
        <td>{{rowData.id}}</td>
        <td>{{rowData.name}}</td>
        <td>{{rowData.TName}}</td>
        <td>{{rowData.Base}}</td>
        <td>{{rowData.Date | date:'medium' }}</td>
      </tr>
    </ng-template>
    <ng-template pTemplate="paginatorleft">
      <span>Total Records: {{totalRecords}}</span>
    </ng-template>
    <ng-template pTemplate="paginatorright">
      <p-dropdown [options]="pageRecordsCountOptions" [(ngModel)]="rowCount" optionLabel="value" (onChange)="changeCount()"></p-dropdown>
    </ng-template>
  </p-table>
</div>

Answer 1

当[lazy] =“true”时，过滤器在前端不起作用，但是通过（onLazyLoad）事件将此工作留给后端。

如果要在前端过滤数据，可以进入lazyLoad（）方法：

.subscribe(response =>. ...

使用event参数提供的过滤器信息。