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

Question

我已经使用 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>要渲染的 a 中。

对于我的行数据，它是一个像这样的数组：

[{
  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
}
]);

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

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

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

Answer 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/上第一个示例中的代码得到了这个解决方案

Answer 2

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