Вы используете c3, который напрямую обращается к нативным элементам для рисования диаграмм.Это не очень хорошо работает с Angular, и вы столкнетесь с множеством проблем (рендеринг на стороне сервера будет зависать, диаграммы в некоторых случаях просто не будут отображаться, как здесь, и т. Д.).Я настоятельно рекомендую вам написать компонент-оболочку или директиву для ваших диаграмм c3, которая принимает данные и некоторые параметры в качестве входных данных и рисует диаграмму в ngAfterViewInit().
Вот примерный пример того, как он будет выглядеть: https://stackblitz.com/edit/c3-chart-example?file=app%2Fchart.directive.ts.
Чтобы дать вам исчерпывающее объяснение, ваша проблема здесь в том, что вы рисуете диаграмму с3 на элементе, который не существует.Структурная директива *clrIfExpanded, как и *ngIf, создает элементы внутри только тогда, когда они отображаются.Они просто не существуют, пока строка не будет расширена, но вы рисуете диаграмму только при инициализации.С помощью директивного решения каждая диаграмма рисуется только тогда, когда она должна быть отображена, и в этот момент элемент существует.
Наконец, также обратите внимание, что все элементы диаграмм имели одинаковый HTML-идентификатор, что недопустимоHTML.Причина, по которой это сработало, заключается в том, что c3 прощает и позволяет вам рисовать все из них одновременно, а не просто запрашивать первый элемент с этим идентификатором.В версии, использующей директиву, идентификатор больше не используется, я просто связываюсь с самим элементом.