单击禁用列后，Ag Grid单元消失

Question

我使用Ag-grid-community（21.1.1）创建了具有可编辑和禁用列功能的自定义单元格编辑器。

由于某些原因，当我按照以下步骤操作时，单元格数据会消失。

默认

1. 编辑单元格

2. 单击任何禁用的列单元格，而无需按Enter按钮

3. 单击展开/折叠动作
4. 滚动表以检查已编辑的单元格，数据消失了。

这是怎么了？

HTML

 <ag-grid-angular *ngIf="!cLoader" #agGrid id="cisGrid" class="ag-theme-balham cis-grid excelsheet"
            [defaultColDef]="defaultColDef" [frameworkComponents]="frameworkComponents" [columnDefs]="columnDefs"
            [columnTypes]="columnTypes" [rowData]="rowData" [gridOptions]="gridOptions" [context]="context"
            (cellValueChanged)="onCellValueChanged($event)"
            suppressScrollLag="true" [isExternalFilterPresent]="isExternalFilterPresent"
            [doesExternalFilterPass]="doesExternalFilterPass" (gridReady)="onGridReady($event)">
          </ag-grid-angular>

Component.ts

    this.columnDefs = this.createTableHeader(data['header'], isEditableTable);
          this.rowData = this.createTableData(data['body']);

 createTableHeader(data: any, editable: boolean) {
    const columnDefinitions = [];
    let isEditable;
    let updateCellClass;
    let isTooltip;

    data.map(d => {
      (editable === true) ?
        (isEditable = d.editable, updateCellClass = d.class, isTooltip = d.colId) :
        (isEditable = editable, updateCellClass = 'disabled', isTooltip = null);

      const mappedColumn = {
        headerName: d.value,
        headerTooltip: d.value,
        tooltipComponent: 'agtooltip',
        field: d.colId,
        colId: d.colId,
        minWidth: 150,
        tooltipField: isTooltip,
        editable: isEditable,
        cellClass: this.cellEditableToggle.bind(this),
        cellClassRules: {
          'warning': this.cellErrorBg.bind(this),
          'success': this.cellSuccessBg.bind(this)
        },
        cellRenderer: 'agExcel',
        cellEditor: 'agUndoCellEditor',
        cellEditorParams: {
          validationType: d.type,
          format: d.format
        },
        headerValueGetter: this.gridHeaderValueGetter.bind(this)
      };
      columnDefinitions.push(mappedColumn);

    });
    return columnDefinitions;
  }

createTableData(data): any {
    const gridData = [];
    data.forEach(d => {
      const createRowData: Object = {};
      const cellIds: Array<any> = [];
      createRowData['id'] = d.rowId;

      d.data.map(v => {
        createRowData[v.colId] = this.formatData(v.value);
        cellIds.push(this.setCellId(v));
      });
      createRowData['cellIds'] = cellIds;
      createRowData['errors'] = d.errors;
      createRowData['excelRowId'] = d.excelRowIndex;
      gridData.push(createRowData);
    });

    return gridData;
  }

Cell Render.ts

@Component({
    selector: 'square-cell',
    template: `{{display()}}`
})
export class AgGridExcelRenderComponent implements ICellRendererAngularComp, OnDestroy {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    display () {
      return this.params.value;
    }

    ngOnDestroy() {
       // console.log(`Destroying SquareComponent`);
    }

    refresh(): boolean {
        return true;
    }
}

单元格编辑器html / ts

<input #input [(ngModel)]='value' (keyup)='onKeyPress($event)' (focus)='focus($event)' class="input-edit" placeholder="{{placeholder}}">
<i class='fa fa-undo undo' aria-hidden='true' (click)='isUndo()'></i>


@ViewChild('input', { read: ViewContainerRef, static: false }) public input;

  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.cancelBeforeStart = false;

  }

  agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;

    this.validationType = this.params.colDef.cellEditorParams.validationType;
    this.dataFormat = this.params.colDef.cellEditorParams.format;

    //  this.toolTipContainer = this.el.nativeElement.querySelector('.tooltiptext');
  }

  refresh(params): boolean{
    return true;
  }

  getValue(): any {
    return this.value;
  }