Angular SlickGrid可空复杂对象字段渲染报错如何配置解决

问题原因 #

报错是SlickGrid内置的Formatters.complexObject没有做空值兼容导致的：这个formatter内部会直接调用Object.entries()处理传入的字段值，当嵌套字段返回为null/undefined时，就会触发类型转换错误，后续的宽度、DOM节点读取报错都是这个渲染异常引发的连锁问题。

修复方案 #

不需要改动其他基础配置，只要自定义一个兼容空值的formatter替换内置的complexObject即可，示例代码如下：

// 自定义兼容空值的复杂对象formatter
const nullableComplexObjectFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
  // 先判断值是否为空，空的话直接返回空字符串或者自定义占位符
  if (value === null || value === undefined) {
    return ''; // 也可以返回 '-' 之类的占位内容用于展示
  }
  // 非空的话直接调用官方的complexObject formatter逻辑即可
  return Formatters.complexObject(row, cell, value, columnDef, dataContext);
}

之后把你原有列配置里的formatter替换成自定义的即可：

{ 
  id: 'fullName', 
  field: 'user.fullName', 
  name: 'Agent Name', 
  filterable: true, 
  sortable: true, 
  formatter: nullableComplexObjectFormatter // 替换为自定义的formatter
},

如果你的嵌套路径可能出现父级对象为空的场景（比如user本身就是null，导致user.fullName读取异常），还可以额外增加queryFieldResolver配置处理层级空值：

columnDef: [
  {
    id: 'fullName',
    field: 'user.fullName',
    name: 'Agent Name',
    filterable: true,
    sortable: true,
    formatter: nullableComplexObjectFormatter,
    // 处理嵌套路径的空值读取
    queryFieldResolver: (item) => item?.user?.fullName ?? ''
  }
]

修改完成后空值场景就不会触发渲染报错，空值会直接展示你定义的占位内容。

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