編輯圖標未顯示在 ag-grid 中

Question

版本：

角度：10.0.10
@angular/cli 10.0.6

我使用以下命令安裝引導程序

npm install @coreui/angular --save
npm 安裝引導程序

見代碼：

app.module.ts

@NgModule({
     bootstrap: [AppComponent]
      })

注冊.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>',

有關更多信息，請參閱單元格渲染器部分

有很多方法可以設置 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 Cell Renderer。

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 中

問題描述

2 個解決方案

解決方案1
0 已采納 2020-09-02 10:58:21

現場示例

解決方案2
0 2020-09-02 11:11:29

編輯圖標未顯示在 ag-grid 中

問題描述

2 個解決方案

解決方案1 0 已采納 2020-09-02 10:58:21

現場示例

解決方案2 0 2020-09-02 11:11:29

解決方案1
0 已采納 2020-09-02 10:58:21

解決方案2
0 2020-09-02 11:11:29