Ag-grid图像渲染

Question

我正在做一个项目，我必须在 table 中使用 ag-grid。我正在为项目使用 angular。但问题是我想在 ag-grid 的一个单元格中显示用户的个人资料图片和姓名，就像我附加的图像一样。但是我无法渲染图像。我怎样才能做到这一点？我尝试了很多东西，但都失败了。请帮助我找到解决方案。

import { Component, OnInit } from '@angular/core';
import { HeaderService } from 'src/app/services/header.service';

declare function settingsTab(): any;

function actionCellRenderer(params: any) {
    let eGui = document.createElement("div");

    let editingCells = params.api.getEditingCells();
    // checks if the rowIndex matches in at least one of the editing cells
    let isCurrentRowEditing = editingCells.some((cell: any) => {
        return cell.rowIndex === params.node.rowIndex;
    });

    if (!isCurrentRowEditing && params.data != undefined) {
        eGui.innerHTML = `
            <button class="action-button edit">
                <svg xmlns="http://www.w3.org/2000/svg" width="14.778" height="14.908" viewBox="0 0 14.778 14.908">
                    <g id="Icon_feather-edit" data-name="Icon feather-edit" transform="translate(-2.25 -1.938)">
                    <path id="Path_652" data-name="Path 652" d="M8.939,6H4.32A1.32,1.32,0,0,0,3,7.32v9.238a1.32,1.32,0,0,0,1.32,1.32h9.238a1.32,1.32,0,0,0,1.32-1.32V11.939" transform="translate(0 -1.782)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                    <path id="Path_653" data-name="Path 653" d="M18.929,3.228a1.4,1.4,0,0,1,1.98,1.98L14.64,11.477l-2.64.66.66-2.64Z" transform="translate(-5.041 0)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                    </g>
                </svg>
            </button>
            <button class="action-button delete">
                <svg xmlns="http://www.w3.org/2000/svg" width="14.831" height="16.497" viewBox="0 0 14.831 16.497">
                    <path id="Path_654" data-name="Path 654" d="M16.5,6.333l-.722,10.116A1.666,1.666,0,0,1,14.113,18h-6.9a1.666,1.666,0,0,1-1.662-1.548L4.833,6.333M9,9.665v5m3.333-5v5m.833-8.332v-2.5A.833.833,0,0,0,12.332,3H9a.833.833,0,0,0-.833.833v2.5M4,6.333H17.331" transform="translate(-3.25 -2.25)" fill="none" stroke="#e0e0e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                </svg>
            </button>
        `;
    }
    return eGui;
}
function roleCellRenderer(params: any) {
    let eGui = document.createElement("div");

    let editingCells = params.api.getEditingCells();
    // checks if the rowIndex matches in at least one of the editing cells
    let isCurrentRowEditing = editingCells.some((cell: any) => {
        return cell.rowIndex === params.node.rowIndex;
    });

    if (!isCurrentRowEditing && params.data != undefined) {
        eGui.innerHTML = `
        <div class="form-group" style="height: 30px;">
            <select name="role" id="role" style="height: 30px; font-weight: 500;">
                <option value="0">Admin</option>
                <option value="1" selected>Secretary</option>
                <option value="2">User</option>
            </select>
        </div>
        `;
    }
    return eGui;
}

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

    public gridApi;
    defaultColDef;
    public rowData: any = [];
    public searchText: string = "";

    columnDefs = [
        { 
            headerName: "Name",
            field: "name",
            cellRenderer: ({ avatar }) => `<img style="height: 14px; width: 14px" src=${avatar} />`
        },
        { 
            headerName: "email", 
            field: "email",
            cellStyle: {
                color: '#96A0B5'
            }
        },
        { 
            headerName: "Role", 
            field: "role",
            cellRenderer: roleCellRenderer
        },
        { 
            headerName: "", 
            field: "action",
            cellRenderer: actionCellRenderer
        }
    ];

    row = [
        {
            "name": "Patrick Roberts",
            "avatar": "assets/img/patient.png",
            "email": "fionnapearson@gmail.com",
            "role": "",
            "action": ""
        },
        
    ];

    constructor(private headerService: HeaderService) { }

    ngOnInit(): void {
        Promise.resolve().then(() => this.headerService.setTitle('Admin Setup'));
        settingsTab(); // switching settings menu
    }

    onGridReady(params:any) {
        params.api.sizeColumnsToFit();
        this.rowData = this.row;
    }

}

Answer 1

通过params并检查params.data.avtar；

cellRenderer: (params) => `<img style="height: 14px; width: 14px" src=${params.data.avatar} />`

或者，考虑为 cellRenderer

创建单独的组件

https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

https://plnkr.co/edit/?p=preview&preview

Ag-grid图像渲染

Ag-grid Image rendering

javascript

ag-grid

angular