ag-grid cellRendererFramework 在 angular 中不起作用

Question

我正在尝试在 ag-grid table 单元格中添加一个简单的组件。我按照 aggrid 网站上的说明进行操作，但它不会渲染组件。这是我的代码：

  columnDefs = [
{ headerName: "Name", field: "name" ,width: 400},
{ headerName: "GoodsFinalCode", field: "goodsFinalCode" ,width:  200},
{ headerName: "operation", field: "operation" ,cellRendererFramework: OperationComponent, width: 450} 
];


rowData  = [ {
      name : 'b',
      goodsFinalCode :6,
 }
 ]

gridoptiopns 是：

  this.gridOptions = <GridOptions>{
  rowData: this.rowData,
  columnDefs: this.columnDefs,
  context: {
      componentParent: this
  },
  enableColResize: true

};

组件是：

        import { Component } from '@angular/core';

        @Component({
        selector: 'app-operation',
        templateUrl: './operation.component.html',
        styleUrls: ['./operation.component.scss']
        })

     export class OperationComponent  {


     private params: any;

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

运行中html我只有一个按钮。但aggrid单元格中什么也没有出现。

Answer 1

您用作单元格渲染器的组件应实现 ag-grid 给出的 ICellRendererAngularComp。

operation.component.ts

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

@Component({
  selector: 'app-operation',
  templateUrl: './operation.component.html',
  styleUrls: ['./operation.component.css']
})
export class OperationComponent implements ICellRendererAngularComp {
  private params: any;

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

  refresh(): boolean {
    return false;
  }

  constructor() { }

}

那你必须告诉aggrid把这个操作组件作为一个自定义组件来使用。这是通过在 AgGridModule 中提供它们来完成的。

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { OperationComponent } from './grid/options-cell-renderer/options-cell-renderer.component';

@NgModule({
  declarations: [
    AppComponent,
    OperationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    NgbModule,
    HttpClientModule,
    AgGridModule.withComponents([
      OperationComponent
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ag-grid cellRendererFramework 在 angular 中不起作用

ag-grid cellRendererFramework not work in angular

cellrenderer

angular

ag-grid-angular