Angular中Ag Grid自定义单元格渲染器如何通用获取字段值？

我在自定义Ag Grid单元格渲染器时，想获取列字段值，目前能通过params.data.code拿到，但硬编码code字段导致渲染器无法复用。按照Ag Grid文档，配置valueGetter（可搭配valueFormatter）会优先于field生效，但渲染器里的params.value始终是undefined。

我试过三种列定义：

// 第一种：仅配置field
{
  headerName: "test",
  field: 'code', 
  cellRenderer: CustomCellRendererComponent,
  cellRendererParams: {
    title: "title-for-custom-component",
    parent: this,
  }
}

// 第二种：配置field+valueGetter
{
  headerName: "test",
  field: 'code', 
  cellRenderer: CustomCellRendererComponent,
  cellRendererParams: {
    title: "title-for-custom-component",
    parent: this,
  },
  valueGetter: (params) => return params.data.code,
}

// 第三种：在cellRendererParams里传value方法
{
  headerName: "test",
  field: 'code', 
  cellRenderer: CustomCellRendererComponent,
  cellRendererParams: {
    title: "title-for-custom-component",
    parent: this,
    value: (params) => {params.data.code}
  },
}

单元格渲染器代码：

export class CustomCellRendererComponent implements ICellRendererAngularComp {
  params: ICellRendererParams;

  refresh(params: ICellRendererParams): boolean {
    return false;
  }

  agInit(params: ICellRendererParams): void {
    this.params = params;
    // 三种尝试的结果：
    // 第一种：打印undefined
    // 第二种：打印undefined
    // 第三种：打印 (params) => { params.data.code; }
    console.log("valuegetter:"+this.params.value)

    // 这个能拿到值，但硬编码了code字段，无法复用
    console.log("valuegetter:"+this.params.data.code)
    // title和parent参数能正常访问
  }
}

请问能不能不通过params.data硬编码字段值？还是只能用这种方式？

当然可以不用硬编码params.data的字段名，有两种靠谱的方式实现渲染器复用：

方式一：修复valueGetter语法，利用params.value #

你之前的问题出在valueGetter的语法错误，第二种列定义里的箭头函数写法有误：如果箭头函数用大括号包裹，必须显式写return；如果直接返回表达式，不需要大括号。

修正后的列定义：

{
  headerName: "test",
  field: 'code', 
  cellRenderer: CustomCellRendererComponent,
  cellRendererParams: {
    title: "title-for-custom-component",
    parent: this,
  },
  valueGetter: (params) => params.data.code, // 正确写法，直接返回表达式
  // 或者带大括号的写法：valueGetter: (params) => { return params.data.code; }
}

此时渲染器里的params.value就能拿到valueGetter返回的值，后续换其他字段时，只需要修改valueGetter里的字段名，渲染器完全不用改动，实现复用。

方式二：通过cellRendererParams传入字段名，动态取值 #

如果不想用valueGetter，可以在列定义的cellRendererParams中传入当前列的字段名，渲染器里通过这个参数动态从params.data取值：

列定义：

{
  headerName: "test",
  field: 'code', 
  cellRenderer: CustomCellRendererComponent,
  cellRendererParams: {
    title: "title-for-custom-component",
    parent: this,
    fieldName: 'code' // 传入当前列的字段名
  }
}

渲染器代码修改：

export class CustomCellRendererComponent implements ICellRendererAngularComp {
  params: ICellRendererParams;
  cellValue: any;

  refresh(params: ICellRendererParams): boolean {
    return false;
  }

  agInit(params: ICellRendererParams): void {
    this.params = params;
    // 动态获取字段值
    this.cellValue = params.data[params.cellRendererParams.fieldName];
    console.log("cell value:", this.cellValue);
  }
}

这种方式同样能实现渲染器复用，换字段时只需要修改cellRendererParams里的fieldName即可。

额外说明 #

你第三种尝试里把函数放到cellRendererParams的value属性中，只是传递了函数本身，并没有执行它，所以打印出的是函数体。如果想用这种方式，需要在渲染器里主动调用该函数：

// 渲染器里调用传入的value函数
const cellValue = params.cellRendererParams.value(params);

但这种方式不如前两种简洁，不推荐使用。

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