内联单元格编辑 ag-grid 不适用于下拉列表和日期选择器

Question

我已经使用 Angular 7 应用程序在 ag-grid 中实现了内联单元格编辑下拉菜单、文本框和日期选择器。我注意到，每当我从下拉列表或日期选择器中选择一个值但更改的值没有得到更新时，就会触发 cellValueChanged 事件。它只有文本框控件值得到更新。 有人能告诉我问题是什么吗？

html

<div class="card" *ngIf="DocumentUploadDetails && DocumentUploadDetails.DocumentEntities" style="margin-top: 10px">
    <div class="card-body" style="width:100%; text-align: left;">
        <div style="overflow-x: hidden; overflow-y: hidden; ">
            <div class="form-group row">
                <div class="panel panel-default col-md-12  ">
                    <div class="panel-body">
                        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                            style="float: left;">
                            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                style="width: 100%; height: 100%" [columnDefs]="ColumnDefs" rowHeight="30"
                                [components]="components" [rowData]="DocumentUploadDetails.DocumentEntities"
                                [editType]="editType" (cellClicked)="onCellClicked($event)"
                                (cellValueChanged)="onCellValueChanged($event)" headerHeight="30" rowSelection="single">
                            </ag-grid-angular>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

组件

 private setColumns() {
            const self = this;
            this.ColumnDefs.push({ headerName: 'ID', field: 'DocumentId', hide: true, editable: false });
            this.ColumnDefs.push({ headerName: 'Document Type ID', field: 'DocumentTypeId', hide: true, editable: true });
            this.ColumnDefs.push({
                headerName: 'Type', field: 'DocumentTypeName', hide: false, editable: true, cellEditor: 'agSelectCellEditor',
                cellEditorParams: {
                    values: this.DocumentTypesForDropDown
                }
            });
            this.ColumnDefs.push({ headerName: 'Document', field: 'DocumentName', hide: false, editable: true });
            this.ColumnDefs.push({ headerName: 'Document Date', field: 'DocumentDate', hide: false, editable: true, cellEditor: 'datePicker' });
            this.ColumnDefs.push(
                {
                    cellRenderer: function (p) {

                        if (p.node.data && p.node.data.DocumentId) {
                            const eSpan = self.getDeleteSpan();
                            eSpan.addEventListener('click', function () {
                                const self2 = self;
                                self2.Delete(p.node.data.DocumentId);
                            });
                            return eSpan;
                        }
                        else {
                            return '';
                        }
                    }, comparator: this.comparator.StringComparator, width: 50, cellStyle: { textAlign: 'center' }, cellClass: 'align-center', headerName: "Delete", pinned: 'right'

                });

            this.components = { datePicker: getDatePicker() };
        }


        onCellValueChanged(params) {
            console.log('onCellValueChanged fired');
            console.log('DocumentTypeId =' + params.data.DocumentTypeId);
            this.document = <IDocument>{
                id: params.data.DocumentId,
                name: params.data.DocumentName,
                documentTypeId: params.data.DocumentTypeId,
                documentDate: new Date(this.datepipe.transform(params.data.DocumentDate, 'yyyy-MM-dd')),
            };

            this.documentUploadService
                .updateDocumentUpload(this.document)
                .then((result) => {
                    if (result) {

                        this.notify.success('Documents uploaded successfully');
                    }
                }).catch(err => {
                    this.notify.error('An Error Has Occured While uploading the documents');
                });
        }



 public getDocumentTypes() {
        this.documentUploadService.getDocumentTypes()
            .subscribe(data => {
                this.DocumentTypes = data;
                this.DocumentTypesForDropDown = this.DocumentTypes.map(x => x.Name);
            },
                err => {
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });

    }

Answer 1

对于日期选择器

你应该初始化你的 components 属性，你的组件的构造函数。

constructor(...){
   ....
   this.components = { datePicker: getDatePicker() };
}

并在 setColumns() 函数中删除这一行

对于下拉菜单

例如创建下拉值列表

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

...

this.sports = data.map(a=>a.sport).filter(onlyUnique);

然后像这样设置columnDefs

{
    headerName: "Sport",
    field: "sport",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
       values: this.sports
    },
    editable:true
},

example