如何使用和添加图标到 ag-grid 中的单元格以指示该单元格是可编辑的

Question

我正在使用角度为 6 的 ag-grid。对于特定列，单元格应该是可编辑的。请找到下面的图片。

我如何添加这个图标，点击它可以编辑单元格。

Answer 1

您需要使用cellRenderercolumnDefs 数组中的对象中的字段。基本上，您将通常会显示的内容和要显示的图标放在一起<span>。

something.component.ts

columnDefs = [
   /* ... */
   { headerName: 'Notes', field: 'notes', editable: true, 
     cellRenderer: function(params) {
          return '<span><i class="material-icons">edit</i>' + params.value + '</span>'
     } }
];

Answer 2

查看官方演示

修改后的plnkr 示例

getRenderer() function您可以创建自定义组件并将cellRenderer其注入或gridOptions componentsframeworkComponents