如何在Ag-Grid中使用模板表达式？现有代码无法正常渲染

嘿，我完全懂你碰到的这个麻烦——Ag-Grid的原生template属性并不支持自动解析像{{}}这类框架表达式语法，所以才会把表达式原封不动地输出在网格里。下面给你两种靠谱的解决思路，根据你的技术环境选就行：

如果你用的是Angular版Ag-Grid #

方法1：用cellRenderer快速实现 #

直接通过cellRenderer函数获取当前行的name字段值，拼接成HTML返回：

this.gridColumnDefs = [
  {
    headerName: 'Security Name',
    field: 'name',
    cellStyle: {'text-align': 'left'},
    filter: 'agTextColumnFilter',
    tooltipField:'name',
    cellRenderer: function(params) {
      // params.data包含当前行的所有数据，直接取name字段
      return `<span>${params.data.name}</span>`;
    }
  }
]

方法2：用自定义Angular组件（适合复杂场景） #

如果你的单元格需要绑定事件、使用Angular指令这类复杂逻辑，可以先创建一个自定义单元格组件，然后用cellRendererFramework指定它：

// 先定义好你的自定义组件（比如SecurityNameComponent）
this.gridColumnDefs = [
  {
    headerName: 'Security Name',
    field: 'name',
    cellStyle: {'text-align': 'left'},
    filter: 'agTextColumnFilter',
    tooltipField:'name',
    cellRendererFramework: SecurityNameComponent
  }
]

在自定义组件里，你可以通过@Input() params: ICellRendererParams拿到行数据，然后正常用Angular的{{}}表达式渲染。

如果是纯JS/Vue/React环境 #

核心思路还是用cellRenderer函数，通过参数获取行数据：

this.gridColumnDefs = [
  {
    headerName: 'Security Name',
    field: 'name',
    cellStyle: {'text-align': 'left'},
    filter: 'agTextColumnFilter',
    tooltipField:'name',
    cellRenderer: (params) => {
      return `<span>${params.data.name}</span>`;
    }
  }
]

额外说明 #

Ag-Grid的template属性主要是给表头（headerTemplate）或者静态模板场景用的，它不会触发框架的表达式绑定逻辑。要动态渲染单元格内容，cellRenderer才是官方推荐的标准方案，它能让你完全掌控单元格的渲染内容和逻辑。

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