[英]Using Ag-Grid Enterprise license getting a 'ag-grid: Looking for component [agSetColumnFilter] but it wasn't found." error
I've been using Ag-Grid's Enterprise feature " agSetColumnFilter " for months with no problem.我几个月来一直在使用 Ag-Grid 的企业功能“ agSetColumnFilter ”,没有任何问题。
I'm using the following versions:我正在使用以下版本:
"ag-grid": "^17.1.1",
"ag-grid-enterprise": "^17.1.1",
"ag-grid-react": "^17.1.0",
After a bit of refactoring, I'm starting to get this error after just clicking on the filter menu:经过一些重构后,只需单击过滤器菜单,我就开始收到此错误:
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)
The refactoring work I did was to iterate over an array and create React-Bootstrap tab components that render the Ag-grid components when clicked.我所做的重构工作是遍历一个数组并创建 React-Bootstrap 选项卡组件,在单击时呈现 Ag-grid 组件。 I place the array of tabs in a
<div>
to be rendered.我将选项卡数组放在要呈现的
<div>
中。
For my row data , it's an array like so:对于我的行数据,它是一个像这样的数组:
[{
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' }]
}]
My column definitions are returned from a function like this: ( lookup
is a hash where my filter options are stored, I iterate over the values and produce an array of strings to give to filterParams.values
:我的列定义是从这样的函数返回的:(
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
}
]);
Everything works fine including displaying rows, row selection, sorting, text filtering, the infinite scroll.一切正常,包括显示行、行选择、排序、文本过滤、无限滚动。 ONLY when I click on the filter hamburger menu in the column header does it give the above error.
只有当我点击列标题中的过滤器汉堡菜单时,才会出现上述错误。
This filter has worked in the past and since then I have not altered row data structure or my column definitions or filter options.这个过滤器在过去一直有效,从那以后我没有改变行数据结构或我的列定义或过滤器选项。
*************** Screenshots for reference *************** *************** 截图供参考 ****************
I solved this by我解决了这个问题
running npm i @ag-grid-enterprise/set-filter
,运行
npm i @ag-grid-enterprise/set-filter
,
importing the module in the component that used the set filter: import { SetFilterModule } from '@ag-grid-enterprise/set-filter';
在使用 set 过滤器的组件中导入模块:
import { SetFilterModule } from '@ag-grid-enterprise/set-filter';
adding SetFilterModule
to grid modules array:将
SetFilterModule
添加到网格模块数组:
gridModules = [ClientSideRowModelModule, RowGroupingModule, MenuModule, SetFilterModule];
and of course binding gridModules to the grid (which I had from before): <ag-grid-angular... [modules]="gridModules"></ag-grid-angular>
当然,将 gridModules 绑定到网格(我之前就有):
<ag-grid-angular... [modules]="gridModules"></ag-grid-angular>
I got this solution from inspecting the code in the first example on https://www.ag-grid.com/javascript-grid-filter-set/我通过检查https://www.ag-grid.com/javascript-grid-filter-set/上第一个示例中的代码得到了这个解决方案
I just ran into the same issue and was able to resolve by removing "filter: true" from my column definitions.我刚刚遇到了同样的问题,并且能够通过从我的列定义中删除“filter: true”来解决。 I see that you're defining specific types of filters in your definitions, you might try removing it and seeing if ag-grid recognizes the types of filters it needs.
我看到您在定义中定义了特定类型的过滤器,您可以尝试删除它并查看 ag-grid 是否识别它需要的过滤器类型。 If that doesn't work, you might try changing those filters to custom filters instead.
如果这不起作用,您可以尝试将这些过滤器更改为自定义过滤器。 Hope that helps!
希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.