編集可能なAg-gridセルを永続化する適切な方法

Question

編集可能なセルでag-grd-ng2（Angular2のag-grid）を実装しました。これらの更新をサーバーに伝播しています。

私はイベントを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フィールドにアクセスできなくなります。

可能性があります。カラム.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; 
}