Question

这似乎比Clarity（vmware）问题更重要，但我相信，我们也可以通过某种方式解决Angular问题，或者我可能缺少一些重要的Angular生命周期来解决此问题。

我正在使用来自清晰度数据网格https://vmware.github.io/clarity/documentation/v0.11/datagrid/expandable-rows

的“可扩展行”

我可以在行下放置任何文本，并且显示效果很好，但是当我在行内放置图表时，它不起作用。

当我将相同的图表放在表格顶部时，效果很好：

<div class="" id="chart"></div>

但是当我将其放在扩展列下时，它不起作用：

<clr-dg-row-detail *clrIfExpanded>
       Why chart doesn't display here
       <div class="" id="chart"></div>
 </clr-dg-row-detail>

任何清晰度专家都可以在这里帮助我。这是我的闪电战。 https://stackblitz.com/edit/clarity-datagrid-basic-ky6yze?file=app%2Fapp.component.html 请让我知道是否需要更多信息：

Answer 1

您正在使用c3，它直接访问本机元素以绘制图表。这在Angular中不能很好地发挥作用，您会遇到无数的问题（服务器端渲染将崩溃，在某些情况下（如在此处显示）图表将无法显示，等等）。我强烈建议您为c3图表编写一个包装器组件或指令，以将数据和某些选项作为输入并在true中绘制图表。

下面是一个粗略的示例：https://stackblitz.com/edit/c3-chart-example?file=app%2Fchart.directive.ts。

为了给您一个全面的解释，这里的问题是，您正在不存在的元素上绘制c3图表。 $pos结构指令与ngAfterViewInit()一样，仅在显示元素时在其中创建元素。在行被扩展之前，它们根本不存在，但是您只能在初始化时绘制图表。使用指令解决方案时，仅在需要显示每个图表时才绘制每个图表，此时该元素存在。

最后，还要注意，所有图表元素都具有相同的HTML ID，这不是有效的HTML。之所以起作用，是因为c3是宽容的，并允许您同时绘制所有图，而不仅仅是查询具有该ID的第一个元素。使用指令的版本中，不再涉及ID，我只绑定到元素本身。

图表未在清晰度数据网格的可扩展行内绘制

1 个答案: