Фильтры PrimeNg TurboTable не работают с LazyLoad - PullRequest
Новая
       19

Фильтры PrimeNg TurboTable не работают с LazyLoad

0 голосов
/ 13 сентября 2018

Я не могу использовать фильтры с опцией отложенной загрузки. Кто-нибудь может мне помочь, если я что-то здесь упустил?

Я читаю документацию primeng это и это и это с примерами. Я мог бы найти любое решение.

Когда я использую [ленивый] и фильтры вместе, фильтры не работают. Если бы я просто удалил [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>

1 Ответ

0 голосов
/ 15 сентября 2018

Когда [lazy] = "true", фильтр не работает во внешнем интерфейсе, но оставляет эту работу внутреннему событию (onLazyLoad).

Если вы хотите отфильтровать ваши данные во внешнем интерфейсе, вы можете использовать метод lazyLoad (): 

.subscribe(response =>. ...

с использованием информации фильтра, предоставленной параметром события.

...