typescript - Kako da pokrenem samo na tipku enter u filteru primeNG datatabela u Angular 2

Koristim PrimeNG datatables u Angular 2. Kako mogu pokrenuti filtriranje PrimeNG datatablea samo kada se pritisne tipka Enter?

Osnovni kod:

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 datoteka:

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) {

  }
}

Kako mogu nadjačati filtriranje datatables-a da se pokrene samo kada je pritisnut enter?

Odgovor #1

Službeno to nije moguće... ali to bih mogao učiniti manipulirajući filterDelay atributom i koristeći značajku događaja tipke u Angular 2, napisat ću opću verziju kako to učiniti.

TS datoteka

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 datoteka

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

Testirao sam koristeći:

• Primeng 1.0.0-beta.17
• Angular 2.0.0 konačno izdanje

(1) Broj dana kašnjenja za automatski filtar je približno 24 dana. Nije moguće koristiti Infinity, Number.MAX_VALUE ili Number.MAX_SAFE_INTEGER jer preglednici koriste 32-bitne int vrijednosti.

Nadam se da je ovo korisno.