Ag网格单元渲染数据消失

Question

我使用带有自定义单元格编辑器的Ag网格创建了表格。第一次加载页面时，表数据如下图所示正确显示。

但是令人惊讶的是，当编辑任何单元格并打开开发人员工具（F12）时，突然编辑的单元格列数据突然消失，除了下图所示的已编辑单元格。

自动删除DOM

我的代码有什么问题？为什么数据消失了？

请专家咨询。

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"
          [stopEditingWhenGridLosesFocus]="false" (cellValueChanged)="onCellValueChanged($event)"
          suppressScrollLag="false" (gridReady)="onGridReady($event)">
        </ag-grid-angular>

component.ts

 constructor() {
      this.context = { componentParent: this };
        this.frameworkComponents = {
          agUndoCellEditor: AgGridUndoCellEditorComponent,
          agtooltip: AgGridTooltipComponent
        };

        this.defaultColDef = {
          resizable: true, editable: true, tooltipComponent: 'agtooltip'
        };

        this.gridOptions = {
          rowData: this.rowData,
          rowHeight: 27,
          headerHeight: 20, onGridSizeChanged(params) {
            params.api.sizeColumnsToFit();
          }
        };
    }



onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit(); 
  }

 this.excelImportDataService.getExcelSheetById(this.selectedExcelId).subscribe((data) => {
      this.columnDefs = this.createTableHeader(data['header'], false);
      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)
        },
        cellEditor: 'agUndoCellEditor',
        cellEditorParams: {
          validationType: d.type,
          format: d.format
        },
        headerValueGetter: this.gridHeaderValueGetter.bind(this)
      };
      columnDefinitions.push(mappedColumn);

    });
    return columnDefinitions;
  }

  cellEditableToggle(params) {
    return (params.colDef.editable === true ? '' : 'disabled');
  }

  cellErrorBg(params) {
    let errorBg: boolean;
    params.data.errors.forEach((element) => {
      if (params.colDef.colId === element.colId && (element.status.type === 'error' || element.status === 'error')) {
        errorBg = true;
      }
    });
    if (errorBg) {
      return true;
    }
  }

  cellSuccessBg(params) {
    let successBg: boolean;
    params.data.errors.forEach((element) => {
      if (params.colDef.colId === element.colId && (element.status.type === 'Success' || element.status === 'Success')) {
        successBg = true;
      }
    });
    if (successBg) {
      return true;
    }
  }

  gridHeaderValueGetter(params: any) {
    return this.translate.transform(params.colDef.headerName);
  }

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

  setCellId(v: any) {
    const cellIdRow: Object = {};
    cellIdRow['colId'] = v.colId;
    cellIdRow['cellId'] = v.cellId;
    return cellIdRow;
  }

  formatData(v: string) {
    return ((v === null) ? v = ' ' : v);
  }