Диаграмма не рисует внутри расширяемого ряда сетки данных ясности

Question

Это больше похоже на вопрос 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 Пожалуйста, дайте мне знать, если вам нужна дополнительная информация:

Answer 1

Вы используете c3, который напрямую обращается к нативным элементам для рисования диаграмм. Это не очень хорошо работает с Angular, и вы столкнетесь с множеством проблем (рендеринг на стороне сервера будет зависать, диаграммы в некоторых случаях просто не будут отображаться, как здесь, и т. Д.). Я настоятельно рекомендую вам написать компонент-оболочку или директиву для ваших диаграмм c3, которая принимает данные и некоторые параметры в качестве входных данных и рисует диаграмму в ngAfterViewInit(),

Вот примерный пример того, как это будет выглядеть: https://stackblitz.com/edit/c3-chart-example?file=app%2Fchart.directive.ts.

Чтобы дать вам исчерпывающее объяснение, ваша проблема в том, что вы рисуете диаграмму с3 на элементе, который не существует. *clrIfExpanded структурная директива, так же, как *ngIf, только создает элементы внутри, когда они отображаются. Они просто не существуют, пока строка не будет расширена, но вы рисуете диаграмму только при инициализации. С помощью директивного решения каждая диаграмма рисуется только тогда, когда она должна быть отображена, и в этот момент элемент существует.

Наконец, также обратите внимание, что все ваши элементы диаграммы имели одинаковый идентификатор HTML, который не является допустимым HTML. Причина, по которой это сработало, заключается в том, что c3 прощает и позволяет вам рисовать на всех из них одновременно, а не просто запрашивать первый элемент с этим идентификатором. В версии, использующей директиву, идентификатор больше не используется, я просто привязываю к самому элементу.