[英]Why Apply Button does not Work in Ag-grid Filter (agSetColumnFilter)?
[英]Using Ag-Grid Enterprise license getting a 'ag-grid: Looking for component [agSetColumnFilter] but it wasn't found." error
我几个月来一直在使用 Ag-Grid 的企业功能“ agSetColumnFilter ”,没有任何问题。
我正在使用以下版本:
"ag-grid": "^17.1.1",
"ag-grid-enterprise": "^17.1.1",
"ag-grid-react": "^17.1.0",
经过一些重构后,只需单击过滤器菜单,我就开始收到此错误:
ag-grid: Looking for component [agSetColumnFilter] but it wasn't found.
Array.concat.ComponentProvider.retrieve @ componentProvider.js?6ebb:209
Array.concat.ComponentResolver.resolveByName @ componentResolver.js?1587:159
Array.concat.ComponentResolver.getComponentToUse @ componentResolver.js?1587:155
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:271
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52
Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45
Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122
(anonymous) @ headerComp.js?f669:107
componentResolver.js?1587:274 Error creating component filter=>agTextColumnFilter
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:274
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52
Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45
Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122
(anonymous) @ headerComp.js?f669:107
filterManager.js?d1c0:401 Uncaught TypeError: Cannot read property 'then' of null
at FilterManager.Array.concat.FilterManager.putIntoGui (filterManager.js?d1c0:401)
at FilterManager.Array.concat.FilterManager.createFilterWrapper (filterManager.js?d1c0:394)
at FilterManager.Array.concat.FilterManager.getOrCreateFilterWrapper (filterManager.js?d1c0:343)
at StandardMenuFactory.Array.concat.StandardMenuFactory.showPopup (standardMenu.js?505d:52)
at StandardMenuFactory.Array.concat.StandardMenuFactory.showMenuAfterButtonClick (standardMenu.js?505d:45)
at HeaderComp.Array.concat.HeaderComp.showMenu (headerComp.js?f669:122)
at HTMLSpanElement.<anonymous> (headerComp.js?f669:107)
我所做的重构工作是遍历一个数组并创建 React-Bootstrap 选项卡组件,在单击时呈现 Ag-grid 组件。 我将选项卡数组放在要呈现的<div>
中。
对于我的行数据,它是一个像这样的数组:
[{
id: 1,
keyword: 'tv',
projects: [{ id: 1, name: 'Project 1' }, {id: 2, name: 'Project 2' }]
},
{
id: 2,
keyword: 'sofa',
projects: [{ id: 3, name: 'Project 3' }]
}]
我的列定义是从这样的函数返回的:( lookup
是存储我的过滤器选项的哈希,我遍历这些值并生成一个字符串数组以提供给filterParams.values
:
function createColumnDefs = (lookup) => ([
{
field: 'projects',
headerName: 'Projects',
filter: 'agSetColumnFilter',
cellRenderer: 'ListRenderer',
cellRendererParams: {
accessor: 'name'
},
filterParams: {
values: _.get(lookup, 'projects', []).map(project => project.name),
debounceMs: 200
}
},
{
field: 'keyword',
headerName: 'Keyword',
filter: 'agTextColumnFilter',
sort: 'asc',
filterParams: {
debounceMs: 200
},
pinned: 'left',
minWidth: 250
}
]);
一切正常,包括显示行、行选择、排序、文本过滤、无限滚动。 只有当我点击列标题中的过滤器汉堡菜单时,才会出现上述错误。
这个过滤器在过去一直有效,从那以后我没有改变行数据结构或我的列定义或过滤器选项。
*************** 截图供参考 ****************
我解决了这个问题
运行npm i @ag-grid-enterprise/set-filter
,
在使用 set 过滤器的组件中导入模块: import { SetFilterModule } from '@ag-grid-enterprise/set-filter';
将SetFilterModule
添加到网格模块数组:
gridModules = [ClientSideRowModelModule, RowGroupingModule, MenuModule, SetFilterModule];
当然,将 gridModules 绑定到网格(我之前就有): <ag-grid-angular... [modules]="gridModules"></ag-grid-angular>
我通过检查https://www.ag-grid.com/javascript-grid-filter-set/上第一个示例中的代码得到了这个解决方案
我刚刚遇到了同样的问题,并且能够通过从我的列定义中删除“filter: true”来解决。 我看到您在定义中定义了特定类型的过滤器,您可以尝试删除它并查看 ag-grid 是否识别它需要的过滤器类型。 如果这不起作用,您可以尝试将这些过滤器更改为自定义过滤器。 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.