Question

我正在使用ag-grid，并且有一些列是日期。我需要能够使用日期选择器来编辑单元格，就像它们在docs中一样，如果您在预览中单击“代码”标签，您可以执行相同的操作，但是我无法执行此操作工作。我收到此错误，

错误错误：找不到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>

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

Module.ts


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

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

Answer 1

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

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

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

1 个答案: