使用 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>中。

對於我的行數據，它是一個像這樣的數組：

[{
  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 ，

• 在使用 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/上第一個示例中的代碼得到了這個解決方案

Answer 2

我剛剛遇到了同樣的問題，並且能夠通過從我的列定義中刪除“filter: true”來解決。 我看到您在定義中定義了特定類型的過濾器，您可以嘗試刪除它並查看 ag-grid 是否識別它需要的過濾器類型。 如果這不起作用，您可以嘗試將這些過濾器更改為自定義過濾器。 希望有幫助！