【问题标题】:Edit icon not displaying in ag-grid编辑图标未显示在 ag-grid 中
【发布时间】:2020-12-21 12:33:37
【问题描述】:

版本:

  • 角度:10.0.10

  • @angular/cli 10.0.6

我使用以下命令安装引导程序

  • npm install @coreui/angular --save
  • npm install 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>',
    }
  ];

当我点击编辑图标检查时

【问题讨论】:

标签: angular typescript angular-cli ag-grid


【解决方案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>

现场示例

【讨论】:

  • 我按照你说的替换了,但是没有出现图标帮助请
  • 你安装了 font-awesome 包吗?
  • 您可以按照说明here
  • 安装此命令后npm install @fortawesome/free-solid-svg-icons不显示编辑图标
  • 这条线完美运行template: '&lt;span&gt;&lt;i class="fa fa-edit" data-action-type="edit"&gt;&lt;/i&gt;&lt;/span&gt;',,我忘记了在inde.html中添加这条线&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" /&gt;感谢帮助
【解决方案2】:

您需要使用 Ag-grid Cell Renderer。

cellRenderer: (params) =&gt; {return '&lt;span&gt;&lt;i class="fa fa-edit" data-action-type="edit"&gt;&lt;/i&gt;&lt;/span&gt;'}

更多详情请阅读 - https://www.ag-grid.com/javascript-grid-cell-rendering-components/

【讨论】:

猜你喜欢
  • 2019-10-04
  • 2019-07-30
  • 2019-04-20
  • 1970-01-01
  • 1970-01-01
  • 2020-04-20
  • 1970-01-01
  • 2020-08-01
  • 2019-09-10
相关资源
最近更新 更多