代码之家  ›  专栏  ›  技术社区  ›  Extreme

Priming TurboTable过滤器不适用于LazyLoad

  •  0
  • Extreme  · 技术社区  · 6 年前

    我无法使用具有延迟加载选项的筛选器。如果我遗漏了什么,有人能帮我吗?

    this this this 举例说明。我可以找到任何解决办法。

    当我同时使用[lazy]和过滤器时,过滤器不起作用。如果我只是删除 [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>
    1 回复  |  直到 6 年前
        1
  •  0
  •   mp92    6 年前

    当[lazy]=“true”时,过滤器在前端不工作,但通过(onLazyLoad)事件将此工作留给后端。

    如果要在前端筛选数据,可以将其导入lazyLoad()方法:

    .subscribe(response =>. ...