使用Ag-Grid Enterprise许可证获取“ ag-grid:正在寻找组件[agSetColumnFilter],但未找到。”错误

时间:2019-02-12 22:31:23

标签: javascript reactjs ag-grid ag-grid-react

几个月来我一直在使用Ag-Grid的企业功能“ agSetColumnFilter ”,没有问题。

我正在使用以下版本:

gcc

经过一些重构后,我仅在单击过滤器菜单后就开始出现此错误:

    "ag-grid": "^17.1.1",
    "ag-grid-enterprise": "^17.1.1",
    "ag-grid-react": "^17.1.0",

我所做的重构工作是遍历数组并创建React-Bootstrap选项卡组件,这些组件在单击时呈现Ag-grid组件。我将选项卡数组放置在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) 中以进行渲染。

对于我的行数据,它是一个像这样的数组:

<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

一切正常,包括显示行,行选择,排序,文本过滤和无限滚动。仅当我单击列标题中的“过滤器汉堡包”菜单时,它才会出现上述错误。

此过滤器过去一直有效,从那时起,我一直没有更改行数据结构或列定义或过滤器选项。

***************截图供参考***************

My row data (an array of objects Column Defs that I pass into Ag-grid

error printed in Chrome inspector

2 个答案:

答案 0 :(得分:1)

我通过

解决了这个问题
  • 运行npm i @ag-grid-enterprise/set-filter

  • 将模块导入使用设置过滤器的组件中: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/

上第一个示例中的代码,我得到了此解决方案

答案 1 :(得分:0)

我遇到了同样的问题,并且能够通过从列定义中删除“ filter:true”来解决。我看到您正在定义中定义特定类型的过滤器,可以尝试将其删除并查看ag-grid是否能够识别所需的过滤器类型。如果这不起作用,您可以尝试将那些过滤器改为自定义过滤器。希望有帮助!