ag-grid cellRendererFramework 不能在角度工作

Posted 2023-03-28

【中文标题】ag-grid cellRendererFramework 不能在角度工作

【英文标题】：ag-grid cellRendererFramework not work in angular

【发布时间】：2019-10-15 00:11:26

【问题描述】：

我正在尝试在 ag-grid 表格单元格中添加一个简单的组件。我在 agggrid 网站上显示说明，但它不会渲染组件。这是我的代码：

  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,
 
 ]

网格选项是：

  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中我只有一个按钮。但 agggrid 单元格中没有出现任何内容。

【参考方案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()  

那么你必须告诉 agggrid 使用这个操作组件作为自定义组件。这是通过在 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