Angular Slickgrid配置formatter的格式化列筛选功能失效

问题根源 #

Angular-Slickgrid的formatter只负责修改单元格最终渲染的DOM内容，不会改动筛选、排序逻辑读取的数据源值。默认内置筛选规则会直接读取field配置对应的原始字段值做匹配，你当前配置中field指向customers，筛选时拿到的是完整的客户对象，和输入的字符串筛选词自然无法正常匹配。
另外你当前列的id配置为id，极易和表内主键列ID重名，会引发列注册、事件绑定的隐性异常，建议先改成全局唯一值。

可直接落地的解决方案 #

方案1：通过queryField指定筛选排序取值路径（最简便，适配常规场景）

4.x版本原生支持queryField配置，用来分离渲染取值和筛选排序取值的路径，不需要改动现有formatter逻辑，加一行配置即可修复普通文本筛选：

this.columnDefinitions = [
  // ......
  { 
    id: 'customerFirstName', // 替换为唯一ID，避免和其他列冲突
    name: 'Customer First Name', 
    field: 'customers', // 保留给formatter读取完整客户对象
    queryField: 'customers.firstName', // 筛选、排序时直接读取嵌套的firstName字段
    sortable: true, 
    filterable: true, 
    type: FieldType.string,
    formatter: (_row: number, _cell: number, value: any) => {
      return value?.firstName ?? 'NA';
    },
   },
   // ........
]

该方案下输入firstName的关键词可正常匹配筛选，唯一不足是无法命中firstName为空时显示的NA值——因为queryField读取到的空值是null/undefined，不是渲染后的字符串NA。

方案2：自定义筛选+排序逻辑（适配需要匹配NA显示值的场景）

如果需要用户输入NA时，能把所有firstName为空的行筛选出来，直接给列加自定义筛选谓词和排序逻辑即可，完全匹配渲染后的显示值：

import { Filters } from 'angular-slickgrid';

this.columnDefinitions = [
  // ......
  { 
    id: 'customerFirstName',
    name: 'Customer First Name', 
    field: 'customers',
    sortable: true, 
    filterable: true, 
    type: FieldType.string,
    filter: {
      model: Filters.inputText,
      // 自定义匹配规则，和formatter的显示逻辑保持一致
      filterPredicate: (dataContext, filterArgs) => {
        const searchKey = (filterArgs.searchTerm || '').toLowerCase().trim();
        const showVal = dataContext.customers?.firstName ?? 'NA';
        return showVal.toLowerCase().includes(searchKey);
      }
    },
    // 同步自定义排序逻辑，避免排序时比对对象
    sorter: (a, b) => {
      const valA = a?.firstName ?? 'NA';
      const valB = b?.firstName ?? 'NA';
      return valA.localeCompare(valB);
    },
    formatter: (_row: number, _cell: number, value: any) => value?.firstName ?? 'NA',
   },
   // ........
]

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