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

【问题标题】：Chart doesn't draw inside expandable row of clarity datagrid图表未在清晰度数据网格的可扩展行内绘制
【发布时间】：2018-10-25 10:30:37
【问题描述】：

这似乎更像是 Clarity (vmware) 问题而不是 Angular，但我相信，我们也可以通过 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>

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

【问题讨论】：

标签： angular c3.js vmware-clarity clarity

【解决方案1】：

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

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

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

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

【讨论】：

非常感谢您的详细解释。你拯救了我的一天。