我试图在ag-grid表单元中添加一个简单的组件。我在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中,我只有一个按钮。但在聚集细胞中什么也没出现。
答案 0 :(得分: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 { }