Ag-grid cellRenderer with Font Awesome 图标

Question

我正在尝试通过 cellRenderer 在 ag-grid 中添加 Font Awesome 图标。

如何在单元格渲染中正确渲染 <fa-icon> 标签？

这是我的尝试：

    {
      width: 150,
      headerName: 'Events',
      // tslint:disable-next-line: object-literal-shorthand
      cellRenderer: (params: any) => {
        const PHD: boolean = params.data.PHD;
        const DG: boolean = params.data.DG;
        const HOT: boolean = params.data.HOT;
        let result = '';
        if (PHD) {
          result = result + '<fa-icon [icon]="faCoffee"></fa-icon>';
        }
        if (DG) {
          result = result + '';
        }
        if (HOT) {
          result = result + '';
        }
        return result;
      },
      resizable: true,
      filter: false,
    },

这是它从 cellRenderer 渲染的方式：

将标签放在组件中 HTML 可以正常工作并呈现到页面，如下所示：

Answer 1

fa-icon 是自定义 angular 组件，您的简单单元格渲染器不会对其进行解析。

而不是这个

'<fa-icon [icon]="faCoffee"></fa-icon>'

您应该使用更简单的 <i> 方法

'<span><i class="fa fa-coffee"></i></span>';

让您的简单单元格渲染器正常工作。

但是，如果您仍然想使用 fa-icon angular 组件，那么您应该考虑按照 here.

中的描述实现单元格渲染器组件

Ag-grid cellRenderer with Font Awesome 图标

Ag-grid cellRenderer with Font Awesome Icons

font-awesome

ag-grid

angular

ag-grid-angular