agGrid recherche de données en utilisant angular2 et tapuscrit

Question

Comment puis-je définir le filtrage dans mon composant agGrid. J'ai vu un exemple d'agGrid mais il est écrit en javascript. https://www.ag-grid.com/angular-grid-filtering/index.php

Mais il semble que je ne peux pas faire fonctionner celui-ci en utilisant mon code ts ci-dessous.

agGrid.component.ts

import {Component} from 'angular2/core'; 
import {AgGridNg2} from 'ag-grid-ng2/main'; 
import {GridOptions} from 'ag-grid/main'; 

import 'ag-grid-enterprise/main'; 

@Component({ 
    selector: 'app', 
    templateUrl: 'app/partials/agGrid/agGrid.html', 
    directives: [AgGridNg2] 
}) 
export class AgGridComponent { 

    columnDefs = [ 
     { headerName: "Contact Name", field: "make" }, 
     { headerName: "Company Name", field: "model" }, 
     { 
      headerName: "Last Event", 
      field: "price", 
      cellClass: 'rightJustify', 
      cellRenderer: function (params: any) { 
       return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria 
      } 
     }, 
     { headerName: "Contact Email", field: "model" }, 
     { headerName: "Work Phone", field: "model" } 
    ]; 
    // put data directly onto the controller 
    rowData = [ 
     { make: "Toyota", model: "Celica", price: 35000 }, 
     { make: "Ford", model: "Mondeo", price: 32000 }, 
     { make: "Porsche", model: "Boxter", price: 72000 } 
    ]; 

    gridOptions = { 
     columnDefs: this.columnDefs, 
     rowData: null, 
     enableFilter: true 
    }; 



    values=''; 
    onKey(event:any) { 
     this.values = event.target.value; 
     this.gridOptions.columnDefs.setQuickFilter(this.values); 
    } 

    searchValue=''; 

} 

grid.html

<input placeholder="Filter..." type="text" 
 
\t [value]="searchValue" 
 
\t (input)="searchValue = $event.target.value" 
 
/> 
 

 
<ag-grid-ng2 
 
\t \t class="ag-fresh" 
 
\t \t enable-sorting 
 
\t \t enable-filter 
 
\t \t style="height: 300px" 
 
\t \t [gridOptions]="gridOptions" 
 
\t \t (cellClicked)="onCellClicked()" 
 
\t \t [columnDefs]="columnDefs" 
 
\t \t [rowData] = "rowData"> 
 
</ag-grid-ng2>

Answer 1

Je devine déjà résolu ce problème, mais pour ceux qui sont actuellement En regardant, vous pouvez lier votre boîte de saisie ariable dans votre code.

Votre code HTML devrait ressembler à ceci:

<input type="text" (keyup)="onQuickFilterChanged()" 
    [(ngModel)]="quickSearchValue" placeholder="quick filter..." /> 

et votre code TS comme ceci:

quickSearchValue: string = ''; 

private onQuickFilterChanged() { 
    this.gridOptions.api.setQuickFilter(this.quickSearchValue); 
} 

Hope this helps.