Question

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

以下框架组件适用于detailGridOptions，但为detailCellRendererParams = { detailGridOptions: { columnDefs: [ { "field": "isActive", "cellRendererFramework": CheckboxCellRenderer } ]} };

引发了错误

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

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;
  }
}

复选框渲染器组件

;WITH N(N)AS 
(
    SELECT 1 FROM(VALUES(1),(1),(1),(1),(1),(1),(1),(1),(1),(1))M(N)
),
tally(N) AS
(
    SELECT 1 FROM N,N a,N b,N c,N d
)
INSERT INTO yourTableName(col1,col2.....)
SELECT
       Mkt,
       Property,
       Season,
       b.Date,
       TName,

FROM Table1 a
CROSS APPLY
( 
  SELECT top(datediff(d,Datefrom,case when DateTo >= DateFrom
             then dateadd(d, 1, DateTo) else DateFrom end))
    DATEADD(d,row_number()over(order by 1/0)-1, DateFrom) Date
  FROM tally
) b

Answer 1

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

import { CheckboxCellRenderer } from "path_to_file";

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

withComponents调用对于将Angular组件用作单元格/标题是必需的

Answer 2

当您收到该错误时，很可能是因为您没有包括与之相关的Ag-grid框架版本...

您的package.json文件应该运行类似的代码（如果您使用angular并希望使用最新的v19版）

npm install-保存ag-grid-community

npm install-保存ag-grid-enterprise

npm install-保存ag-grid-angular

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

在detailCellRendererParams中指定cellRendererFramework组件时出错

2 个答案: