如何使用 Ag-grid 在本地环境中进行过滤？答案

【问题标题】：How to filter in local environment with Ag-grid?如何使用 Ag-grid 在本地环境中进行过滤？
【发布时间】：2018-07-29 14:47:02
【问题描述】：

我想在 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();
          });
  }

【问题讨论】：

标签： angular filter ag-grid

【解决方案1】：

我找到了解决办法！我创建了一个 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]);
    }
}

【讨论】：