我希望在Angular 2中过滤本地环境(无服务器端)中的列。用户从每个列的选定菜单中选择一个状态。
我该怎么办?有最好的做法吗?
谢谢!
我的代码:
columnDefs: [
{
headerName: "Job status",
field: "jobStatus",
floatingFilterComponentFramework: HListCellComponent,
floatingFilterComponentParams: {
suppressFilterButton: true,
items: [
{
label: 'All',
value: 'all'
},
{
label: 'Created',
value: 'CREATED'
},
{
label: 'Running',
value: 'RUNNING'
},
...
]
}
},
...
suppressCellSelection: true,
enableRangeSelection: true,
floatingFilter: true,
suppressRowClickSelection: true,
enableColResize: true,
enableFilter: true,
onFilterChanged: (event: FilterChangedEvent) => {
// TODO: How to filter in local environment?
}
}
HListCellComponent是一个创建所选菜单的组件,代码为:
agInit(params: any) {
this.params = params;
const api: GridApi = params.api;
const column: Column = params.column;
this.items = params.items;
this.formControl.valueChanges
.debounce(() => Observable.timer(500))
.map(value => value === 'all' ? null : value)
.subscribe(value => {
const colName = column.getColId();
const a: any = api.getFilterInstance(colName);
if (!a.value) {
a.value = {};
}
a.value[colName] = value;
api.onFilterChanged();
});
}
答案 0 :(得分:0)
我找到了解决方案!我创建了一个JSON对象数组,我在用户选择时存储过滤器值,例如:
let filterObject = [
{ jobStatus: 'CREATED' },
...
];
我使用lambda函数来过滤数组:
for (var i = 0; i < filterObject.length; i++) {
for(let key in filterObject[i]) {
this.jobs = this.jobs.filter(item => item[key] === filterObject[i][key]);
}
}