ag-grid 中未显示编辑图标

Question

版本：

Angular: 10.0.10
@angular/cli10.0.6

我使用以下命令安装 bootstrap

npm install @coreui/angular --save
npm 安装bootstrap

见代码：

app.module.ts

@NgModule({
     bootstrap: [AppComponent]
      })

registraion.component.cs

import { Component, OnInit  } from '@angular/core';
import { BackendserviceService } from '../backendservice.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})

export class RegistrationComponent implements OnInit {

   columnDefs = [
    { headerName: 'empid', field: 'empid' },
    { headerName: 'username', field: 'username' },
    { headerName: 'empaddress', field: 'empaddress' },
    { headerName: 'password', field: 'password' },
    { headerName: 'country', field: 'country' },
    {
      headerName: 'Edit',
      template:
        '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',
    }
  ];

当我点击编辑图标检查时

Answer 1

替换此行

template: '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',

和

cellRenderer: () => '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',

有关详细信息，请参阅 cell renderer 部分

设置 font-awesome 的方法有很多种，但如果您想快速设置，只需将 font-awesome css 文件添加到您的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
    />
  </head>
</html>

实例

Answer 2

您需要使用 Ag-grid 单元格渲染器。

cellRenderer: (params) => {return '<span><i class="fa fa-edit" data-action-type="edit"></i></span>'}

有关详细信息，请阅读 - https://www.ag-grid.com/javascript-grid-cell-rendering-components/

ag-grid 中未显示编辑图标

Edit icon not displaying in ag-grid

typescript

ag-grid

angular-cli

angular

实例