Angular Ag-Grid 日期单元格编辑器

Question

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

ERROR 错误：找不到 Datepicker 的组件工厂。你把它添加到@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
    ]
})