在 detailCellRendererParams 中指定 cellRendererFramework 组件时出错答案

【问题标题】：Getting error while specifying cellRendererFramework component within detailCellRendererParams在 detailCellRendererParams 中指定 cellRendererFramework 组件时出错
【发布时间】：2018-10-12 21:49:13
【问题描述】：

在ng-grid-angular 和[masterDetail]="true" 中为[detailCellRendererParams]="detailCellRendererParams" 指定cellRendererFramework 组件"cellRendererFramework": CheckboxCellComponent 时出现以下错误

以下框架组件对gridOptions 工作正常，但对detailGridOptions 抛出错误

ag-grid：您正在指定一个框架组件，但您没有使用 ag-grid 的框架版本：cellRenderer at ComponentResolver.getComponentToUse

detailCellRendererParams = {
    detailGridOptions: {
      columnDefs: [
        {
          "field": "isActive",
          "cellRendererFramework": CheckboxCellRenderer
        }
    ]}
};

复选框渲染器组件

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

@Component({
  selector: 'checkbox-cell',
  template: `<mat-checkbox [ngModel]="params.value" (change)="onChange($event)"></mat-checkbox>`
}) 
export class CheckboxCellRenderer implements ICellRendererAngularComp {

  private params: ICellRendererParams;

  constructor() { }

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

  onChange(event) {
    this.params.data[this.params.colDef.field] = event.checked;
  }

  refresh(params: ICellRendererParams): boolean {
    return true;
  }
}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

尝试在您的 app.module.ts 中添加以下内容

import { CheckboxCellRenderer } from "path_to_file";

@NgModule({
  declarations: [
    CheckboxCellRenderer ,
 ],
 imports: [
    AgGridModule.withComponents([CheckboxCellRenderer ]),
  ],

withComponents 调用是能够将 Angular 组件用作单元格/标题的必要条件

【讨论】：

【解决方案2】：

当您收到该错误时，很可能是因为您没有包含 ag-grid 框架的关联版本...

你的 package.json 你应该运行这样的东西（如果你使用 angular 并且想要最新的网格 v19）

npm install --save ag-grid-community

npm install --save ag-grid-enterprise

npm install --save ag-grid-angular

（确保这些也是您拥有的唯一三个引用 ag-grid 的依赖项）

【讨论】：