ag-grid-angular中agNumberColumnFilter多选过滤仅生效2个条件的问题

我在ag-grid表格顶部设置了多选过滤选项，当选择其中3个选项后，过滤模型如下所示，但ag-grid并未应用全部3个条件，仅生效2个。请问这是ag-grid-angular中agNumberColumnFilter的限制吗？

过滤模型：

{
  "filterType": "number",
  "type": "number",
  "operator": "OR",
  "conditions": [
    {
      "type": "lessThan",
      "filter": 2
    },
    {
      "type": "inRange",
      "filter": 2,
      "filterTo": 5
    },
    {
      "type": "inRange",
      "filter": 6,
      "filterTo": 15
    }
  ]
}

ag-grid-angular组件代码：

<ag-grid-angular #inboxGrid id="viewDetailsGrid"
                                class="ag-theme-balham view-details-grid mailbox-grid-unique-class mailbox-grid-tyle context-menu-style-override"
                                [columnDefs]="columnDefs" [masterDetail]="true"
                                [detailCellRenderer]="detailCellRenderer" [frameworkComponents]="frameworkComponents"
                                [rowData]="rowData" (gridReady)="onGridReady($event)" [rowClassRules]="rowClassRules"
                                [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
                                [allowContextMenuWithControlKey]="true" [getContextMenuItems]="getContextMenuItems"
                                [headerHeight]="32" (rowGroupOpened)="onRowGroupOpened($event)" [enableColResize]="true"
                                (componentStateChanged)="inboxStateChanged($event)" [suppressMenuHide]="true"
                                [groupUseEntireRow]="true" [suppressPaginationPanel]="true"
                                [rowGroupPanelShow]="rowGroupPanelShow" [suppressDragLeaveHidesColumns]="true"
                                [suppressMakeColumnVisibleAfterUnGroup]="false"
                                (rowDoubleClicked)="rowDoubleClicked($event)"
                                [groupRowInnerRenderer]="groupRowInnerRenderer"
                                [groupRowRendererParams]="groupRowRendererParams" [popupParent]="popupParent"
                                (filterChanged)="filterChanged($event)" (firstDataRendered)="firstDataRendered($event)"
                                [getRowHeight]="getRowHeight" (rowDataChanged)="rowDataChanged($event)"
                                [enableCellChangeFlash]="false" [gridOptions]="gridOptions"
                                (columnResized)="onColumnResized($event)" (columnMoved)="ColumnMovedEvent($event)"
                                [suppressPropertyNamesCheck]=false (rowSelected)="onRowSelected($event)"
                                [suppressColumnVirtualisation]="true" (rowClicked)="onRowClicked($event)"
                                [modules]="modules" [embedFullWidthRows]="true" (bodyScroll)="onBodyScroll($event)"
                                [rememberGroupStateWhenNewData]="true" [getRowId]="getRowId"
                                [defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef"
                                [groupMaintainOrder]="true" [groupDisplayType]="groupDisplayType"
                                (columnRowGroupChanged)="onColumnRowGroupChanged($event)"
                                ></ag-grid-angular>
                            
</div>

列定义：

{
  headerName: "View Count",
  field: "viewCount",
  sortingOrder: ["asc", "desc"],
  hide: false,
  suppressMenu: false,
  resizable: true,
  suppressMovable: true,
  showInSecondary: false,
  suppressSizeToFit: true, 
  suppressColumnVirtualisation: true,
  width: 100%,
  minWidth: 330px,
  maxWidth: 700px,
  flex: 1,
  filter: "agNumberColumnFilter",
  menuTabs: ["filterMenuTab"],
  filterParams: {
    suppressMiniFilter: false,
    cellRenderer: (params: any) => {
      return params.value === null ? null : Number(params.value);
    },
    comparator: (a: number, b: number) => {
      if (a == null) return -1;
      if (b == null) return 1;
      return Number(a) - Number(b);
    },
    suppressSorting: false, // Allows sorting of filter values
  },
  cellRenderer: function (params) {
    if (params.value < 2) {
      return "<div class='view-count-0-1'> 0-1 days</div>";
    }
    if (params.value > 1 && params.value < 6) {
      return "<div class='view-count-2-5'> 2-5 days</div>";
    }
    if (params.value > 5 && params.value < 16) {
      return "<div class='view-count-6-15'> 6-15 days</div>";
    }
    if (params.value >= 16) {
      return "<div class='view-count-gt-15'> 16+ days</div>";
    }
    return "";
  }
},

这并非agNumberColumnFilter的固有限制，以下是问题分析和解决方向：

问题分析 #

1. 列配置语法错误：列定义中width: 100%、minWidth: 330px、maxWidth: 700px存在语法问题——宽度属性中，width若用百分比需加引号（如'100%'），minWidth和maxWidth应为数值类型（无需px单位），语法错误可能导致列配置加载异常，间接干扰过滤逻辑。
2. 默认过滤器UI的局限性：agNumberColumnFilter的默认过滤菜单仅支持可视化添加单个条件，若你是手动构造包含多范围条件的过滤模型，ag-grid可能存在解析不完整的情况。
3. 条件边界的潜在冲突：虽然三个条件逻辑上覆盖了目标区间，但第一个条件lessThan:2排除值为2的行，第二个条件inRange(2,5)包含值为2的行，这种边界设定可能导致ag-grid在处理多OR条件时出现异常。

解决办法 #

1. 修正列配置语法 #

将宽度相关属性调整为正确格式：

width: '100%',
minWidth: 330,
maxWidth: 700,

2. 调整过滤模型逻辑 #

可简化过滤条件，避免不必要的边界拆分，比如合并前两个条件为lessThan:6，配合第三个inRange(6,15)，逻辑上与原模型一致：

{
  "filterType": "number",
  "operator": "OR",
  "conditions": [
    { "type": "lessThan", "filter": 6 },
    { "type": "inRange", "filter": 6, "filterTo": 15 }
  ]
}

3. 使用自定义区间过滤器（推荐） #

由于你的业务需求是按预设区间过滤，建议改用agSetColumnFilter实现可视化多选区间，更贴合需求且不易出错：

{
  headerName: "View Count",
  field: "viewCount",
  // 其他配置保留
  filter: 'agSetColumnFilter',
  filterParams: {
    values: ['0-1 days', '2-5 days', '6-15 days', '16+ days'],
    comparator: (filterValue, cellValue) => {
      let cellRange;
      if (cellValue < 2) cellRange = '0-1 days';
      else if (cellValue > 1 && cellValue < 6) cellRange = '2-5 days';
      else if (cellValue > 5 && cellValue < 16) cellRange = '6-15 days';
      else if (cellValue >= 16) cellRange = '16+ days';
      return filterValue === cellRange;
    }
  },
  // 原cellRenderer保留
}

这样用户可直接在过滤菜单中多选区间选项，ag-grid会正确应用所有选中条件。

内容的提问来源于stack exchange，提问作者Unnikrishnan Vasudevan