ag-grid-angular v26.0.0 filterOptions配置双输入框不生效问题

问题根因 #

v26.0.0版本的agTextColumnFilter存在实现限制：

• 仅对内置inRange过滤选项默认渲染双输入框，自定义过滤选项不会主动读取numberOfInputs配置
• 自定义过滤选项仅配置displayKey和numberOfInputs时，缺少必要的渲染判定参数，无法触发双输入框渲染

可行修复方案 #

方案1：补全配置复用内置范围过滤逻辑（无需升级版本） #

不要新建自定义displayKey，直接复用内置inRange标识，补全全量必填参数，同时在配置中写入自定义比较逻辑，示例配置如下：

this.columnDefs = [
  {
    field: 'age',
    filter: 'agTextColumnFilter',
    filterParams: {
      filterOptions: [
        'equals',
        'notEqual',
        'contains',
        {
          displayKey: 'inRange',
          displayName: '范围匹配',
          numberOfInputs: 2,
          // 自定义范围比较逻辑，适配文本类型的范围判断
          predicate: (filterValues: string[], cellValue: string) => {
            const [rangeStart, rangeEnd] = filterValues;
            const formatVal = (val?: string) => val?.trim() ?? '';
            const currentVal = formatVal(cellValue);
            if (rangeStart && currentVal < formatVal(rangeStart)) return false;
            if (rangeEnd && currentVal > formatVal(rangeEnd)) return false;
            return true;
          }
        }
      ],
      // 非范围选项的自定义比较逻辑
      textCustomComparator: (filterType: string, cellValue: string, filterText: string) => {
        // 写入业务需要的自定义比较规则即可
        return (cellValue ?? '').toString().trim().toLowerCase()
          .includes(filterText.trim().toLowerCase());
      }
    }
  }
];

配置注意事项：

• 必须给范围选项配置displayName和predicate参数，否则组件不会识别为有效过滤项
• 不需要额外引入agNumberColumnFilter，全部比较逻辑可在文本过滤器内实现
• 若不需要显示默认的「且/或」条件切换按钮，可在filterParams中添加suppressAndOrCondition: true，不影响双输入框渲染

方案2：升级同大版本小版本修复bug #

v26.0.0版本存在自定义过滤项numberOfInputs参数不生效的已知bug，升级到26系列的v26.2.0及以上小版本即可直接修复，无大版本升级的破坏性变更，原有配置无需调整即可生效。

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