0

我无法使用带有延迟加载选项的过滤器。如果我在这里遗漏任何东西，谁能帮助我？

我通过示例阅读了这个和这个以及这个的primeng文档。我可以找到任何解决方案。

当我同时使用 [lazy] 和过滤器时，过滤器不起作用。如果我只是[lazy]="true"从 HTML 中删除，过滤器就会起作用。我怎样才能实现两者？

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>

4

1 回答 1

0

当 [lazy]="true" 时，过滤器在前端不起作用，而是通过 (onLazyLoad) 事件将这项工作留给后端。

如果你想在前端过滤你的数据，你可以进入lazyLoad() 方法：

.subscribe(response =>. ...

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

于 2018-09-15T18:51:16.083 回答