单元格编辑事件后保存网格数据，有时数组为空

Question

我在我的项目中使用 ag-grid。编辑单元格后，我试图将 rowData 保存到后端。它在大部分时间都有效，但有时，我最终会保留一个序列化的空数组，原因目前我无法理解。

现在，我正在使用 onCellEditingStopped 事件触发保存到数据库。我的组件中的一些代码：

this.plansGridOptions.onCellEditingStopped = this.cellEditingStopped;

cellEditingStopped(params: CellEditingStoppedEvent) { 

    let context = <ImportSessionComponent>params.context;
    context.saveSession().subscribe(r => { });

}

saveSession(): Observable<any> {
    //I'm simply serializing the row data array, and storing that value
    //But sometimes, plansRowData is empty at this point.
    this.importForm.get("uploadItemsSerialized").setValue(JSON.stringify(this.plansRowData));
    return this.importService.saveSession(this.importForm);
}


saveSession(sessionForm: FormGroup): Observable<any> {
    //some conversion from string to number so viewmodel binding works in the backend
    const value = {
        ...sessionForm.value, importType: +sessionForm.get("importType").value, environment: 
        +sessionForm.get("environment").value,
        id: +sessionForm.get("id").value, version: +sessionForm.get("version").value, stepIndex: 
        sessionForm.get("currentStep").value
    };
    return this.http.post<any>("/import/save", value);
}

这是网格的模板标记：

<ag-grid-angular #planGrid style="width: 100%; height: 475px;"
    class="ag-theme-balham-dark"
    [rowData]="plansRowData"
    [gridOptions]="plansGridOptions"
    [columnDefs]="plansRowConfig">
</ag-grid-angular>

似乎网格组件和我的组件数组之间的绑定并不总是固定的（即：我正在使用的事件是在网格更新 plansRowData 数组之前触发的？）我应该使用不同的事件来触发保存？是什么导致了这个问题？

Answer 1

也许切换到 cellValueChanged 会有帮助？这似乎是明智的，因为从理论上讲，一旦更改了值，它就应该被触发——在处理数据之前消除任何未更新的数据问题。可能比 onCellEditingStopped 更合适（不确定钩子的各种生命周期顺序）。

我知道 AG Grid 在计时方面做了一些有趣的事情 - 不止一个地方我有奇怪的 setTimeout 函数来触发某些东西（通常调整大小），实际上它有效。

API 参考

单元格编辑事件后保存网格数据，有时数组为空

Saving grid data after cell editing event, sometimes array is empty

typescript

ag-grid

angular

angular10