Angular 8 中的 ag-grid 单元格内未显示字体真棒图标

Question

我正在尝试学习 Angular，因此请按照有关安装和使用 ag-grid 和 Font Awesome 的指南进行操作，但我无法使用细胞渲染器。如果我在网格外使用相同的图标 HTML，它会正确显示。如果我用 link 之类的东西代替单元格中的图标，它会正确显示。这是我的代码：

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>

Answer 1

记住，当你使用内联cellRenderer - 你可以只实现HTML模板（没有逻辑)，对于逻辑处理，您需要创建自定义 cellRenderer，其中将包含所需的功能等。

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

但是回到你的问题这里有一个解决方案：

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

Demo

Angular 8 中的 ag-grid 单元格内未显示字体真棒图标

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

font-awesome

ag-grid

angular