以Ag-Grid显示图像

Question

ag-Grid社区v20，Angular 7。

我在我的Angular 7应用中有一个工作ag-grid。我想在列中显示图像。https地址包含在field列中。我已经搜索了AG-Grid的文档和网络，但还没有找到此基本情况的示例。有人可以为columnDef提供代码示例。cellRenderer是这样做的方法吗？

{ headerName: 'Select', field: 'Image', width: 75, sortable: false,
    cellRenderer: '<span><img border="0" width = "15" height="10" src=xxxx ></span>' },

Answer 1

这是一个多步骤过程。

请参阅学习在不到10分钟内自定义角网格

创建一个自定义组件。'ImageFormatterComponent.ts'

import { Component } from "@angular/core";
@Component({
  selector: 'app-image-formatter-cell',
  template: `<img border="0" width="50" height="50" src="{{ params.value }}">` })
export class ImageFormatterComponent {
  params: any;
  agInit(params: any){
    this.params = params; 
  } 
}

在app.module.ts

中注册

import { ImageFormatterComponent } from "./album/ImageFormatterComponent";
@NgModule({
  declarations: [ImageFormatterComponent],
  imports: [
    AgGridModule.withComponents([ImageFormatterComponent]) 
  ],

在您使用的组件中：

import { ImageFormatterComponent } from "./ImageFormatterComponent";
  columnDefs = [
    { headerName: 'Select', 
      field: 'Image', 
      width: 60,
      sortable: false, 
      autoHeight: true,
      cellRendererFramework: ImageFormatterComponent 
    }