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

Question

我已经使用角度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

For DatePicker

您应该初始化组件构造函数所在的 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
},

例