Ag 网格图标标题答案

【问题标题】：Ag grid Icon headersAg 网格图标标题
【发布时间】：2021-07-27 02:56:37
【问题描述】：

我正在尝试使用 Ag 网格为其中一列添加图标列。不幸的是，我没有将列标题的图标直接添加到网格选项中的线索。

预期结果是

实际结果是

标题图标不来

组件 TS

 this.gridOptions.api.setColumnDefs([
        {
        headerName: "",
        field: "markedAsFavorite",
        minWidth: 50,
        maxWidth: 50,
        headerComponentParams: { menuIcon: "fa-star" },
        cellRendererFramework: AgGridCustomCellComponent,
        cellRendererParams: {
          ngTemplate: this.markAsFavourite
        }
          }
        ]);

请高手指点？

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

使用headerComponentParams，如下所述：https://www.ag-grid.com/javascript-grid-column-properties/

this.gridOptions.api.setColumnDefs([         
   {
    headerName: "",
    field: "markedAsFavorite",
    minWidth: 50,
    maxWidth: 50,
    headerComponentParams: { template: '<i class="fa fa-star"></i>' },
    cellRendererFramework: AgGridCustomCellComponent,
    cellRendererParams: {
      ngTemplate: this.markAsFavourite
    }
  }
]);

【讨论】：

你知道如何获取标题名称+右边的图标吗？到处找都找不到
尝试对模板应用浮动权。可能会工作
喜欢这个？ headerComponentParams：{模板：'' }，不认为它工作，Idk 如何让 headername 进入模板 lol params.value 不会工作

【解决方案2】：

要显示图标，您需要将 components 属性components: { agColumnHeader: CustomHeader } 赋予网格实例并创建自定义标题函数。点击链接ag-grid-header-component。

【讨论】：

【解决方案3】：

先参考this

在你的手机里

 {
    headerName: "",
    field: "icon",
    width: 100,
    cellRenderer: function(params) {
        return '<span><i class="fa fa-trash"></i></span>';
    }
}

【讨论】：

在您的示例代码中，仅呈现单元格，未加载列标题图标......
该代码仅更改列单元格，但不更改标题。