Отобразить изображение в сетке - PullRequest
Новая
       48

Отобразить изображение в сетке

0 голосов
/ 16 мая 2019

ag-grid community 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>' },

1 Ответ

0 голосов
/ 17 мая 2019

Это многоступенчатый процесс.

См. Узнайте, как настроить угловую сетку менее чем за 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): 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 },
...