Angular ag-grid: Как отрендерить HTML в ячейке? - PullRequest
Новая
       7

Angular ag-grid: Как отрендерить HTML в ячейке?

1 голос
/ 10 июля 2020

Я использую «ag-grid- angular»: «^ 23.1.0», «ag-grid-community»: «^ 23.1.0» Я хочу отобразить пользовательские данные в столбце, т.е. внутренний HTML, например: 

<i class="feather icon-edit-1 "></i>

Я даже искал в документации ag-grid, но не смог найти решение.

Ответы [ 2 ]

0 голосов
/ 10 июля 2020

Для рендеринга HTML вам нужно использовать свойство cellRenderer ag-grid. Это решение лучше всего работает со мной: 

customActions = function () {
  return '<span><a routerLink="/apps/your-path"><i class="users-edit-icon feather icon-edit-1 mr-50"></i></a><i class="users-delete-icon feather icon-trash-2"></i></span>';
};

// ag-Grid column defination
public columnDefs = [
  {
    headerName: 'Actions',
    cellRenderer: this.customActions
  }
];
0 голосов
/ 10 июля 2020

ag grid Angular Cell Render Components 

    import { ChildMessageRenderer } from './child-message-renderer.component';
    @Component({
      selector: 'my-app',
      template: `
     <div class="example-wrapper">
  
  <ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [context]="context"
    [frameworkComponents]="frameworkComponents"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>
 `,
})
 export class AppComponent {
 private gridApi;
 private gridColumnApi;

 private columnDefs;
private rowData;
private context;
private frameworkComponents;
private defaultColDef;

constructor() {
this.columnDefs = [
  {
    headerName: 'Row',
    field: 'row',
    width: 150,
  },
  {
    headerName: 'Square',
    field: 'value',
    colId: 'square',
    width: 150,
  },
  {
    headerName: 'Child/Parent',
    field: 'value',
    cellRenderer: 'childMessageRenderer',
    colId: 'params',
    width: 180,
  },
 ];
 this.rowData = createRowData();
 this.context = { componentParent: this };
 this.frameworkComponents = {
  childMessageRenderer: ChildMessageRenderer,
 };


methodFromParent(cell) {
 alert('Parent Component Method from ' + cell + '!');
}
}

Cell Renderer 

    import { Component } from '@angular/core';
    import { ICellRendererAngularComp } from '@ag-grid-community/angular';

   @Component({
  selector: 'child-cell',
  template: `
  <span
  ><button
    style="height: 20px"
    (click)="invokeParentMethod()"
    class="btn btn-info"
  >
    Invoke Parent
  </button></span
>
`
})
 export class ChildMessageRenderer implements ICellRendererAngularComp {
  public params: any;

 agInit(params: any): void {
  this.params = params;
 }

public invokeParentMethod() {
this.params.context.componentParent.methodFromParent(
  `Row: ${this.params.node.rowIndex}, Col: 
${this.params.colDef.headerName}`
 );
}

refresh(): boolean {
 return false;
 }
}

ссылка ссылки - https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example -rendering-using- angular -components

...