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

Question

这似乎比 angular 更像是 Clarity (vmware) 问题，但我相信，我们也可以以某种方式 Angular 解决这个问题，或者我可能遗漏了一些重要的 Angular 可以解决这个问题的生命周期。

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

当我将同一张图表放在 table 顶部时效果很好：

<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>

任何 Clarity 专家都可以在这里帮助我。这是我的堆栈闪电战。 https://stackblitz.com/edit/clarity-datagrid-basic-ky6yze?file=app%2Fapp.component.html 如果您需要更多信息，请告诉我：

Answer 1

您正在使用直接访问本机元素来绘制图表的 c3。这不适用于 Angular，您会遇到无数问题（服务器端渲染会崩溃，图表在某些情况下不会像这里那样显示，等等）。我强烈建议您为 c3 图表编写一个包装器组件或指令，它将数据和一些选项作为输入并在 ngAfterViewInit().

中绘制图表

给你一个全面的解释，你这里的问题是你在一个不存在的元素上绘制c3图表。 *clrIfExpanded 结构指令，就像 *ngIf 一样，只在显示时创建内部元素。它们在行展开之前根本不存在，但您仅在初始化时绘制图表。使用指令方案，每个图表只在需要显示的时候绘制，此时元素存在。

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

Chart doesn't draw inside expandable row of clarity datagrid