Font awesome icon not displaying inside ag-grid cell in Angular 8

问题

I'm trying to learn Angular so following guides on installing and using ag-grid and Font Awesome, but I can't get an fa-icon to display inside an ag-grid cell using the cellRenderer. If I use the same icon HTML outside of the grid, it displays correctly. And if I put something like a link in place of the icon in the cell, it displays correctly. Here is my code:

component.ts

    import { Component } from '@angular/core'

import { faUserEdit } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent {
  faUserEdit = faUserEdit;

  columnDefs = [
    {
      headerName: '', field: 'id',
      cellRenderer: (params) =>
        '<fa-icon [icon]="faUserEdit"></fa-icon>'
    },
    { headerName: 'Last Name', field: 'lastName'},
    { headerName: 'First Name', field: 'firstName'}
  ]
...

component.html

<ag-grid-angular class="ag-theme-material"
             [rowData]="users"
             [columnDefs]="columnDefs">
</ag-grid-angular>

回答1:

Remember, when you use inline cellRenderer - you can implement just HTML template (no logic), for logic handling you need to create custom cellRenderer which will contain needed functions and so on.

you wouldn't be able to execute component functions through cellRenderer inline implementation

But back to your issue here is a solution:

cellRenderer: (params) => { return '<i class="fas fa-user-edit"></i>'; }

Demo

来源：https://stackoverflow.com/questions/60528581/font-awesome-icon-not-displaying-inside-ag-grid-cell-in-angular-8