angular - 错误类型错误:使用 ag-grid 自定义单元格渲染器时无法读取 null 的属性“包装”
问题描述
我在 ag-grid treeData 中创建了一个自定义单元格渲染器。但是,当我通过在 ts 文件中填充 gridOPtions 然后将其添加到 Grid 来实现它时,我收到错误:
*core.js:6162 ERROR TypeError: Cannot read property 'wrap' of null
at UserComponentFactory.push.Lrxb.UserComponentFactory.createComponentInstance (userComponentFactory.js:359)
at UserComponentFactory.push.Lrxb.UserComponentFactory.createAndInitUserComponent (userComponentFactory.js:116)
at UserComponentFactory.push.Lrxb.UserComponentFactory.newCellRenderer (userComponentFactory.js:62)
at createCellRendererFunc (cellComp.js:722)
at AnimationFrameService.push.tjar.AnimationFrameService.executeFrame (animationFrameService.js:128)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:28497)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at invokeTask (zone-evergreen.js:480)*
代码片段如下。
app.component.ts
:
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridStringRenderer } from "./agGridStringRenderer";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import {
Grid,
GridOptions,
Module,
ModuleRegistry,
} from "@ag-grid-community/all-modules";
import { RowGroupingModule } from "@ag-grid-enterprise/row-grouping";
ModuleRegistry.register(ClientSideRowModelModule);
ModuleRegistry.register(RowGroupingModule);
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
gridApi;
gridColumnApi;
columnDefs;
frameworkComponents;
rowData = [];
autoGrp;
getDataPath;
gridOptions = <GridOptions>{};
constructor(http: HttpClient) {
this.autoGrp = {
headerName: "Company",
cellRenderer: "agGridStringRenderer",
};
this.columnDefs = [
{
headerName: "Office",
field: "office",
cellRenderer: "agGridStringRenderer",
},
];
this.frameworkComponents = {
agGridStringRenderer: AgGridStringRenderer,
};
this.rowData = [
{ company: ["XX"], office: "Pune" },
{ company: ["XX", "XX.x"], office: "PCMC" },
{ company: ["YY"], office: "PCMC" },
{ company: ["YY", "YY.y"], office: "Pune" },
{ company: ["YY", "YY.yy"], office: "PCMC" },
];
this.getDataPath = (data) => {
return data.company;
};
}
ngOnInit(): void {
this.gridOptions = {
columnDefs: this.columnDefs,
autoGroupColumnDef: this.autoGrp,
getDataPath: this.getDataPath,
frameworkComponents: this.frameworkComponents,
rowData: this.rowData,
treeData: true,
};
var eGridDiv: HTMLElement = <HTMLElement>document.querySelector("#myGrid");
new Grid(eGridDiv, this.gridOptions);
}
}
app.component.html
:
<div id="myGrid" style="height: 500px;width: 500px" class="ag-theme-alpine"></div>
agGridStringRenderer.ts
:
import { Component } from '@angular/core';
import { AgRendererComponent } from '@ag-grid-community/angular';
import {ICellRendererParams } from '@ag-grid-community/all-modules';
@Component({
selector: 'agGrid-string-component',
template: `<span><b>{{ this.displayValue }}</b></span>`,
})
export class AgGridStringRenderer implements AgRendererComponent {
static rendererName ="agGridStringRenderer";
displayValue: string;
agInit(params: ICellRendererParams): void {
console.log("*****************************"+params);
this.displayValue = params.value;
}
refresh(params: ICellRendererParams): boolean {
return false;
}
}
app.module.ts
:
import { AgGridModule } from '@ag-grid-community/angular';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridStringRenderer } from './agGridStringRenderer';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent, AgGridStringRenderer],
imports: [BrowserModule, HttpClientModule,
AgGridModule.withComponents([AgGridStringRenderer]),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
请注意,当我ag-grid-angular
在 html 中使用标签而不是在.ts
using中填充网格时,自定义渲染器可以正常工作new Grid()
。
解决方案
推荐阅读
- laravel - Laravel 用另一个模型更新模型
- spring - JPA Repository - 在列表中获取由表连接引起的重复项
- typescript - 在 TypeScript 类中获取方法名称
- travis-ci - 将 TravisCI 设置为仅在主服务器上推送时发布包
- artificial-intelligence - CLIPS - 是否可以在运行时更改规则的显着性?
- python - 如何使用 postgres 在 peewee 查询中访问 ArrayField 的最后一个索引?
- java - 我无法通过添加数组中每个元素的特定值来计算
- android - ADB 二进制文件已过时,Android 模拟器存在严重的性能问题(错误)
- python - 从一组选项中动态查找列表中的 index()
- html - 如何隐藏名称结束 url index.html