Значок шрифта не отображается внутри ячейки ag-grid в Angular 8 - PullRequest
Новая
       43

Значок шрифта не отображается внутри ячейки ag-grid в Angular 8

2 голосов
/ 04 марта 2020

Я пытаюсь выучить Angular, поэтому следую инструкциям по установке и использованию ag-grid и Font Awesome, но я не могу заставить fa-иконку отображаться внутри ячейки ag-grid с помощью cellRenderer. Если я использую тот же значок HTML за пределами сетки, он отображается правильно. И если я поставлю что-то вроде ссылки вместо иконки в ячейке, она будет отображаться правильно. Вот мой код:

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 Ответ

0 голосов
/ 04 марта 2020

Помните , когда вы используете inline cellRenderer - , вы можете реализовать только HTML шаблон (без лог c), для обработки лог c вам нужно создайте пользовательский cellRenderer, который будет содержать необходимые функции и т. д.

вы не сможете выполнять component функции через cellRenderer встроенную реализацию

Но вернемся к вашей проблеме вот решение: 

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

Демо

...