使用 ag-grid 对未定义字段进行列编辑答案

【问题标题】：Column edit on undefined field with ag-grid使用 ag-grid 对未定义字段进行列编辑
【发布时间】：2018-09-12 13:03:41
【问题描述】：

我已经为下面这样的列定义配置了 ag-grid

    {
        headerName: 'Model Level',
        field: 'ModelLevelTimeSeries.Id.Value',
        editable: false,
        cellRendererFramework: RenderEntityComponent,
        cellStyle: { textAlign: "center" },
        suppressSizeToFit: true,
    }

基本上后端的字段可以返回null

"ModelLevelTimeSeries": {
        "Id": null
    }

或

"ModelLevelTimeSeries": {
    "Id": {
        "Value": "dec70622-3ab3-4b47-a324-f69a14a53beb"
    }
}

当我编辑单元格值时，它在agInit 方法中为params.value 返回null。
我正在使用“ag-grid”：“^17.0.0”， “ag-grid-angular”：“^17.0.0”。

【问题讨论】：

这对你有用吗？？

标签： javascript angular ag-grid ag-grid-ng2

【解决方案1】：

只需在列定义中添加 cellRnderer 函数

cellRenderer: params => params.value ? params.value : ''

现在应该是这样的

   {
        headerName: 'Model Level',
        field: 'ModelLevelTimeSeries.Id.Value',
        editable: false,
        //add below line
        cellRenderer: params => params.value ? params.value : ''
        cellRendererFramework: RenderEntityComponent,
        cellStyle: { textAlign: "center" },
        suppressSizeToFit: true,
    }

【讨论】：

【解决方案2】：

你可以为你的coldefs使用值设置器

{
  headerName: 'Model Level',
  field: 'ModelLevelTimeSeries.Id.Value',
  editable: false,
  cellRendererFramework: RenderEntityComponent,
  cellStyle: { textAlign: "center" },
  suppressSizeToFit: true,

  valueSetter: function(params: any){
     if (params.oldValue !== params.newValue) {
         params.data[params.colDef.field] = (params.newValue) !== "" ? params.newValue.toUpperCase() : "";
         return true;
     } 
     else {
         return false;
     }
  }
}

【讨论】：

【解决方案3】：

根据我的经验，如果字段是.a.nested.key，在 valueSetter 中使用 params.data[params.colDef.field] 将不起作用，因为 params.colDef.field 只返回一个字符串，如“ModelLevelTimeSeries.Id .值”

目前，我依靠 lodash 的 set() 在 valueSetter 中进行操作：

import * as set from 'lodash/set'

changeDetectValueSetter (params) {
  if (params.oldValue !== params.newValue) {
    set(params.data, params.colDef.field, params.newValue) // had to use lodash set, because params.colDef.field is a string representation of a nested object key
    // params.data.instruction.billingrecord.invoice_number = params.newValue // could have done this, but it's fixed for that field.
    // params.data[params.colDef.field] = params.newValue // this does not work at all if the field is.a.nested.key
    return true
  } else {
    return false
  }
},

【讨论】：