使用自定义单元格编辑器时出错：'ag-grid-angular' 不是已知元素

Question

我正在尝试创建一个在columnDefs 中配置的自定义单元格编辑器：

cellEditorFramework: CustomEditorComponent

下面是自定义编辑器的实现：

@Component({
  templateUrl: './custom-editor.component.html',
  styleUrls: ['./custom-editor.component.scss']
})
export class CustomEditorComponent implements ICellEditorAngularComp, AfterViewInit {
...
}

我还在@NgModule 中导入了AgGridModule 组件，如下所示：

imports: [
    AgGridModule.withComponents([
        CustomEditorComponent
    ])
],

我的目标是在单击要编辑的单元格时显示ag-grid。我可以弹出div，但没有显示ag-grid。

<div>
  <ag-grid-angular
    style="width: 500px; height: 150px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
  >
  </ag-grid-angular>
</div>

相反，我收到以下错误：

NG8001: 'ag-grid-angular' is not a known element:
...
NG8002: Can't bind to 'rowData' since it isn't a known property of 'ag-grid-angular'.
...
NG8002: Can't bind to 'columnDefs' since it isn't a known property of 'ag-grid-angular'.

我正在使用 Angular 10。请告知。

Answer 1

您是否导入了模块 AgGridModule：

imports: [
    ...
    AgGridModule.withComponents([])
]

尝试删除<ag-grid-angular></ag-grid-angular>，并在弹出窗口中显示一个简单的<div>test sample</div>。

您使用的是哪个 Angular 版本？如果是Angular 9之前的，应该在entryComponents中添加popup组件。