Angular ag-grid列标题自动追加数字的原因是什么？

成因 #

ag-grid要求每一列必须拥有唯一的colId作为标识。当你没有显式指定colId时，框架会自动生成列标识：优先使用列配置中的field属性，若不存在field则使用headerName。如果框架判定自动生成的标识可能存在冲突（或出于唯一性保障机制），就会在headerName后追加数字后缀，最终导致标题被修改为带数字的形式。

你复制粘贴现有列配置添加新列时，原列和新列都未设置独立的colId，触发了框架的自动标识生成与冲突规避逻辑，才出现标题被修改的情况。

解决办法 #

为每一列显式添加唯一的colId属性即可避免该问题，修改后的列配置示例如下：

原有列：

{
  colId: 'my-column', // 添加唯一colId
  headerName: 'My Column',
  sort: 'asc',
  filter: 'agDateColumnFilter',
  filterParams: {
    maxNumConditions: 1,
    filterOptions: ['greaterThanOrEqual', 'lessThanOrEqual', 'equals', 'inRange'],
    inRangeInclusive: true
  },
  width: 240,
  valueGetter: (params: any) => new Date(params.data.myColumn),
  valueFormatter: (params: any) => format(params.value, 'P')
}

新列：

{
  colId: 'my-new-column', // 添加唯一colId
  headerName: 'My New Column',
  sort: 'asc',
  filter: 'agDateColumnFilter',
  filterParams: {
    maxNumConditions: 1,
    filterOptions: ['greaterThanOrEqual', 'lessThanOrEqual', 'equals', 'inRange'],
    inRangeInclusive: true
  },
  width: 240,
  valueGetter: (params: any) => new Date(params.data.myNewColumn),
  valueFormatter: (params: any) => format(params.value, 'P')
}

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