角度 Ag-grid 日期单元格编辑器

Question

我正在使用 ag-grid，并且有日期列。如果您需要能够使用日期选择器编辑单元格，就像他们在文档中一样，如果您单击预览中的代码选项卡，我可以我在做同样的事情，但我无法让我的工作。我收到此错误，

错误错误：找不到日期选取器的组件工厂。您是否将其添加到 @NgModule.entryComponents？

这是我的代码，即使它几乎相同。

.html

<ag-grid-angular #iaAuditTrackingGrid style="width: 100%; height: 100%;" class="ag-theme-balham ag-font-style"
[rowData]="GridRows"
[columnDefs]="GridCols"
[components]="Components"
rowSelection="single"
(gridReady)="onGridReady($event);"
(rowSelected)="onRowSelected($event);"
(cellValueChanged)="onCellValueChanged($event);">
</ag-grid-angular>

组件.ts

import { Component, ViewChild } from "@angular/core";
import { Subscription } from "rxjs";
declare var $: any;
@Component({
selector: 'grid-component',
templateUrl: './grid.component.html'
})
export class IAAuditTrackingComponent {
@ViewChild('iaAuditTrackingGrid') audTrackGrid: any;
public GridApi: any;
public GridRows: any[] = [];
public GridCols: AgGridCol[] = [];
public GridColDefs: AgGridColDef[] = [];
public Components = {
/* custom cell editor component*/
datePicker: this.getDatePicker()
};

public getDatePicker() {
function Datepicker() { }
Datepicker.prototype.init = function (params) {
this.eInput = document.createElement("input");
this.eInput.value = params.value;
$(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
};
Datepicker.prototype.getGui = function () {
return this.eInput;
};
Datepicker.prototype.afterGuiAttached = function () {
this.eInput.focus();
this.eInput.select();
};
Datepicker.prototype.getValue = function () {
return this.eInput.value;
};
Datepicker.prototype.destroy = function () { };
Datepicker.prototype.isPopup = function () {
return false;
};
return Datepicker;
}

模块.ts

@NgModule({
declarations: [
IAAuditTrackingComponent,
NumericEditorComponent
],
providers: [
IAAuditTrackingService
],
imports: [
SharedModule,
BrowserModule,
NgbModule,
FormsModule,
AgGridModule.withComponents([])
]
})

我在这里缺少什么吗？ 谢谢你的时间！

Answer 1

您应该将动态创建的组件添加到 @NgModule.entryComponents 中，正如错误中提到的。 因此，您可以将其添加到@NgModule装饰器中：

@NgModule({
//...
entryComponents: [
Datepicker
]
})