ag angular2 ve typescript kullanarak aramada gezinme

Question

AgGrid bileşenimde filtrelemeyi nasıl ayarlayabilirim. agGrid'den bir örnek gördüm ancak javascript ile yazılmıştır. https://www.ag-grid.com/angular-grid-filtering/index.php

Ancak, bunu bir ts kodumu kullanarak iş yapamıyorum gibi görünüyor.

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

Ben zaten bu çözüldü ancak şu anda olanlar için tahmin ediyorum bakarken, giriş kutunuzu 2 yönlü bağlayabilirsiniz kodunuzda belirlenebilir.

HTML'iniz şu şekilde görünecektir: Böyle

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

ve TS kodu:

quickSearchValue: string = ''; 

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

Umut bu yardımcı olur.