angular - 如何仅在 primeNG 数据表 Angular 2 过滤器中的按键输入时触发

Question

我正在使用 PrimeNG 数据表 Angular 2。 如何仅在按下回车键时触发 primeNG 数据表的过滤器？

基本代码:

HTML:

div class="container-fluid single-col-full-width-container">
  <div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
    <i class="fa fa-search" style="float:right;margin:4px 4px 0 0"></i>
    <input #gb type="text" pInputText size="50" style="float:right" placeholder="Filter...">
  </div>
  <div class="ContentSideSections Implementation">
    <p-dataTable
      #reprintGrid
      [value]="datasource"
      [(selection)]="jobs"
      (onRowSelect)="onRowSelect($event)"
      [paginator]="true"
      [rows]="10"
      [responsive]="true"
      [totalRecords]="totalRecords"
      [lazy]="true"
      (onLazyLoad)="getNewDatasource($event)"
      [pageLinks]="10"
      [rowsPerPageOptions]="[10, 25, 50, 100]"
      [globalFilter]="gb"
    >
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column *ngFor="let col of columnDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
      </p-column>
    </p-dataTable>
  </div>
</div>

TS 文件:

export class ReprintModuleComponent implements OnDestroy, OnInit {

  columnDefs = [
    {
      headerName: 'Athlete',
      field: 'athlete'
    },
    {headerName: 'Age', field: 'age'},
    {headerName: 'Country', field: 'country'},
    {headerName: 'Year', field: 'year'},
    {headerName: 'Date', field: 'date'},
    {headerName: 'Sport', field: 'sport'},
    {headerName: 'Gold', field: 'gold'},
    {headerName: 'Silver', field: 'silver'},
    {headerName: 'Bronze', field: 'bronze'},
    {headerName: 'Total', field: 'total'}
  ];

  datasource=[];
  jobs = [];
  totalRecords: number;
  pngService: PrimeNgCommonService;
  @ViewChild('reprintGrid') reprintGrid;
  @ViewChild('gb') globalFilter;

  getNewDatasource(event: LazyLoadEvent) {
    //in a real application, make a remote request to load data using state metadata from event
    //event.first = First row offset
    //event.rows = Number of rows per page
    //event.sortField = Field name to sort with
    //event.sortOrder = Sort order as number, 1 for asc and -1 for dec
    //filters: FilterMetadata object having field as key and filter value, filter matchMode as value

    let obsResponse = this.pjService.sampleData();
    obsResponse.subscribe(
      res => {
        this.datasource = res;
        this.totalRecords = res.length;
      }
    );       
  }

  constructor(private pjService: PrintJobService) {
    this.pngService = PrimeNgCommonService.getInstance();
  }

  onRowSelect(event) {

  }
}

如何覆盖数据表的过滤以仅在按下输入键时触发？

Answer 1

官方地说这是不可能的...但我可以通过操作 filterDelay 属性并使用 key event 来做到这一点Angular 2 的功能，我将编写一个通用版本来说明如何执行此操作。

---

TS 文件

import {DataTable} from "primeng/components/datatable/datatable";

@Component({
    templateUrl: '.../some.component.html'
})

export class SomeComponent implements OnInit {
    @ViewChild(('myDT')) dataTableX: DataTable;

    constructor() {}

    ngOnInit() {
        // I used this number by (1)
        this.dataTableX.filterDelay = 2147483647;
    }

    filter(){
        this.dataTableX.filterDelay = -1;
    }

    reset(){
        this.dataTableX.filterDelay = 2147483647;
    }
}

HTML 文件

<p-dataTable #myDT (keydown.enter)="filter()" (keyup.enter)="reset()" >
    <p-column field="fieldx" header="Column name" [filter]="true"></p-column>
</p-dataTable>

---

我测试使用:

• Primeng 1.0.0-beta.17
• Angular 2.0.0 最终版本

(1)自动过滤的延迟时间约为24天。无法使用 Infinity、Number.MAX_VALUE 或 Number.MAX_SAFE_INTEGER，因为浏览器使用 32 bits int .

希望这对您有所帮助。