Question

ag-grid社区v20，Angular 7。

我的ag-grid应用中有一个工作正常的Angular 7。我想在列中显示图像。 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

这是一个多步骤的过程。

请参见Learn to customize Angular grid in less than 10 minutes

创建一个自定义组件。 '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): void {
    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 },

以ag-grid显示图像

1 个答案: