1

这似乎更像是清晰度（vmware）问题而不是角度问题，但我相信，我们也可以以某种角度解决这个问题，或者我可能错过了一些可以解决这个问题的重要 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 如果您需要更多信息，请告诉我：

4

1 回答 1

2

您正在使用 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，我只是绑定到元素本身。

于 2018-10-25T13:33:56.940 回答