值评估后，ag-grid cellRenderer 渲染单元失败答案

【问题标题】：ag-grid cellRenderer failed rendering cell after value evaluation值评估后，ag-grid cellRenderer 渲染单元失败
【发布时间】：2018-07-12 19:20:53
【问题描述】：

我有一个内联 cellRenderer 来修改单元格值，如下所示：

cellRenderer: function (params) {
  if(params.value) {
    return params.value * 100;
  }
  return '';
}

我在调试视图中观察到它正在正确计算值。请找到截图

但是，当控件移出 cellRenderer 时，它会抛出以下异常：

ERROR TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at CellComp.push../node_modules/ag-grid/dist/lib/rendering/cellComp.js.CellComp.afterCellRendererCreated (cellComp.js:582)
at Promise.push../node_modules/ag-grid/dist/lib/utils.js.Promise.then (utils.js:1543)
at CellComp.push../node_modules/ag-grid/dist/lib/rendering/cellComp.js.CellComp.createCellRendererInstance (cellComp.js:564)
at CellComp.push../node_modules/ag-grid/dist/lib/rendering/cellComp.js.CellComp.attachCellRenderer (cellComp.js:589)
at CellComp.push../node_modules/ag-grid/dist/lib/rendering/cellComp.js.CellComp.afterAttached (cellComp.js:100)
at rowComp.js:938
at Array.forEach (<anonymous>)
at RowComp.push../node_modules/ag-grid/dist/lib/rendering/rowComp.js.RowComp.callAfterRowAttachedOnCells (rowComp.js:936)
at RowComp.push../node_modules/ag-grid/dist/lib/rendering/rowComp.js.RowComp.insertCellsIntoContainer (rowComp.js:554)
at RowComp.push../node_modules/ag-grid/dist/lib/rendering/rowComp.js.RowComp.refreshCellsInAnimationFrame (rowComp.js:460)

我还有很多其他这样的 cellRenderer 工作正常。不确定这个特定的有什么问题。例如下面一个工作得很好：

cellRenderer: function (params) {
  return params.context.formatDate(params.data.createdDateTime);
}

我正在使用 "ag-grid-enterprise": "^16.0.0", 和 angular 6。

【问题讨论】：

奇怪....可能是它希望字符串返回？我已经在 ag-grid 上多次使用 cellRenderers，就像您在示例中那样，它工作正常.. 尝试 return ''+ params.value * 100
@Sh.Pavel 谢谢伙计，它奏效了。您节省了五月天！

标签： angular ag-grid

【解决方案1】：

根据@Sh。 Pavel 的评论，更新为return ''+ params.value * 100 后生效。

这里要理解的重要一点是，cellRenderer 期望 string 作为回报，因此它直接将其附加到 DOM。

由于您返回的是number，因此没有生成正确的Node（我猜）。通过return '' + params.value * 100; 解决了这个问题。

【讨论】：

只是添加，toString() 也有助于实现相同的结果。例如：(params.value*100).toString().