Ag-grid cellRenderer与字体真棒图标 [英] Ag-grid cellRenderer with Font Awesome Icons

问题描述

我正在尝试通过ag-grid中的cellRenderer添加

将标记放置在组件HTML中的效果如下：

解决方案

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

而不是此

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

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

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

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

但是，如果您仍然想使用fa-icon角度组件，则应该考虑实现单元渲染器组件，如此处。

I am attempting to add Font Awesome Icons via cellRenderer in ag-grid.

How can I properly render <fa-icon> tags within a cell render?

Here is what I attempted:

    {
      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,
    },

Here is how it renders from cellRenderer:

Placing the tag within the component HTML works and renders to the page like this:

解决方案

fa-icon is a custom angular component which won't be parsed by your simple cell renderer.

Instead of this

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

you should use the simpler <i> approach

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

for your simple cell renderer to work.

However if you want still want to use the fa-icon angular component, then you should look into implementing a cell Renderer component as described here.

这篇关于Ag-grid cellRenderer与字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！