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

Это больше похоже на вопрос 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>

Здесь мне может помочь любой эксперт по ясности. Вот мой стек. https://stackblitz.com/edit/clarity-datagrid-basic-ky6yze?file=app%2Fapp.component.html Пожалуйста, дайте мне знать, если вам нужна дополнительная информация:


angular vmware-clarity clarity c3.js
person undefined    schedule 25.10.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

person Eudes    schedule 25.10.2018
comment
Большое спасибо за подробное объяснение. Ты спас мне день. - person undefined; 25.10.2018