Ag-grid cellRenderer с Font Awesome Icons - PullRequest
Новая
       127

Ag-grid cellRenderer с Font Awesome Icons

1 голос
/ 29 апреля 2020

Я пытаюсь добавить Font Awesome Иконки через cellRenderer в ag-grid.

Как правильно отобразить <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 работает и рендерит на страницу, как это:

1 Ответ

3 голосов
/ 29 апреля 2020

fa-icon - это пользовательский angular компонент, который не будет анализироваться вашим простым средством визуализации ячеек.

Вместо этого 

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

вы должны использовать более простой <i> подход 

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

для работы вашего простого средства визуализации ячеек.

Однако, если вы все еще хотите использовать компонент fa-icon angular, вам следует заняться реализацией ячейки Компонент рендеринга, как описано здесь .

...