持续可编辑的AG网格细胞的正确方法

Question

i用可编辑的单元格实现了Ag-grd-ng2（Ag-Grid for Angular2），我正在将这些更新传播到服务器。

我通过接线 GridOptions.oncellvaluechanged 事件做到了这一点。

我的colum def具有以下属性：

            c.editable = true;
            c.cellEditor = 'richSelect';
            c.cellEditorParams = {
                cellRenderer: o => o.value ?  o.value.name : o.value, // use name property from underlying collection to show in dropdown
                values: list
            }
            c.newValueHandler = p => p.data[key] = p.newValue.name; // guessing this needs to be done so that newly selected dropdown item shows only the name in cell 

此实现的主要问题是，从下拉列表中选择一个项目将立即在网格单元格中更新，无论其基本异步呼叫是否成功。

是否有更好的模式可以与此网格一起使用以进行更新，以便如果呼叫失败，则在网格中恢复值，或者直到成功回调之前才设置为新值？

另一个问题是，NewValueHandler使新选择的下拉列表在单元格中正确显示，但是Oncellvaluechanged不再可以访问新选择的项目的ID字段。

我看到的一种可能性是 column.newvaluehandler 。也许有一种方法可以将其用于异步操作，而仅设定成功的新价值？

更新，尝试将其作为一种可能的解决方案：

newValueHandler(p, key){
    this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code) // async server update
        .catch(err =>  {
            p.data[key] = p.oldValue; // set the saved value
            return Observable.throw(err);
        })
        .subscribe(data => { $.notify(p.colDef.headerName + ' saved', 'success');
            p.data[key] = p.newValue.name; // set the saved value
        })
}

更新实际上有效，但是UI没有显示新值或旧值，只是空白。可能不是用这种方式工作的:)

Answer 1

一种可能的解决方案：

根据服务器调用将单元格样式设置为成功或失败。这给用户提供了一些有关发生的事情的反馈。

newValueHandler(p, key) {
    if (p.newValue && p.newValue.code) {
        var nv = p.newValue.name;
        this.svc.updateProductField(p.data.ID, p.colDef.field, p.newValue.code)
            .catch(err => {
                p.colDef.cellClass = 'ag-etp-cell-failed';
                $.notify(p.colDef.headerName + ' update failed', 'error');
                return Observable.throw(err);
            })
            .map(o => {
                p.colDef.cellClass = 'ag-etp-cell-saved';
                $.notify(p.colDef.headerName + ' saved', 'success');
            })
            .subscribe();
    }
    p.data[key] = p.newValue.name || p.newValue;
}