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

对于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
},

example

内联单元格编辑ag-grid无法用于下拉菜单和日期选择器

1 个答案: