angular - ag-grid cellRenderer 在值评估后渲染单元格失败

Question

我有一个内联 cellRenderer 可以修改单元格值，如下所示:

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

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

但是，当控件移出 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。

Answer 1

根据@Sh。 Pavel 的评论，它在将其更新为 return ''+ params.value * 100 后起作用。

这里要理解的重要一点是，cellRenderer 期望返回 string，以便直接将其附加到 DOM。

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