我该如何在我的agGrid组件中设置过滤器呢?我看到了一个来自agGrid的示例,但是它是用JavaScript编写的。
https://www.ag-grid.com/angular-grid-filtering/index.php但是似乎我无法使用下面的ts代码使其正常运行。
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"
[value]="searchValue"
(input)="searchValue = $event.target.value"
/>
<ag-grid-ng2
class="ag-fresh"
enable-sorting
enable-filter
style="height: 300px"
[gridOptions]="gridOptions"
(cellClicked)="onCellClicked()"
[columnDefs]="columnDefs"
[rowData] = "rowData">
</ag-grid-ng2>
quickFilterText
或quickFilter
(这取决于 ag-grid 版本)添加到 ag-grid HTML 元素中,并将其绑定到您的 searchValue 属性即可。就是这样。无需监听 keyup、oninput、change 或任何其他事件。 - hastrb