错误类型错误：使用 ag-grid 自定义单元格渲染器时无法读取 null 的属性“wrap”

Question

我在 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 {}

请注意，当我在 html 中使用

ag-grid-angular

标签而不是使用

.ts

填充

new Grid()

中的网格时，自定义渲染器工作正常。

Answer 1

我有，

ERROR TypeError: Cannot read properties of null (reading 'wrap')

这是由于包版本控制不匹配造成的。

"ag-grid-angular": "^22.0.0",
"ag-grid-community": "^22.0.0",

ag-grid-angular 之前版本为 21.1.0