Дочерний компонент отображается только в первой карточке при итерации

Question

Дочерний компонент живет в контейнере карты, ожидая, что каждая диаграмма будет повторяться внутри каждой карты, но дочерний компонент отображается только в первой карте

Я использую * ngFor внутри родительского компонента, где дочерний компонент компонент получает объект. Дочерний компонент - это столбчатая диаграмма. Внутри дочернего компонента (гистограммы) я манипулирую объектом, который содержит значения диаграммы.

По какой-то причине диаграмма выглядит правильно, карты повторяются и визуализируются, но диаграмма / дочерний компонент находится только в одной карте. Я ожидаю, что каждый граф живет внутри своей карты контейнера (родительский компонент).

Этот дочерний элемент получает @Input вот так:

HTML:

<div id="container" #chartContainer></div>

внутри файла TS:

@Input()
  set chartData(data: any) {
   this.chartNumbers = data;
  }

Я пытаюсь использовать это в родительском компоненте, обертывающем дочерний элемент внутри div, который выглядит как карточка. На данный момент я убираю css, чтобы показать * ngFor родительского компонента, дающего дочернему объекту его объект, содержащий номера графиков.

Parent HTML:

<div class="card">
        <div *ngFor='let category of categoriesForChart.list; let i = index'>
            <div class="top-part">
                <h4>{{category.categoryTitle}}</h4>
                <h4>{{category.suppliers}}</h4>
            </div>
            <div class="middle-part">
                <h4>{{category.spend}}</h4>
            </div>
            <jhi-bar-chart [chartData]="category.meta" ></jhi-bar-chart> *** here ***
            <div class="bottom-part">
                <h4 (click)="goTo()">VIEW CATEGORY <img class="svgPurple"
                        src="/content/images/arrow_forward.svg" alt="view category"></h4>
                <img class="svgGrey" src="/content/images/more_vert-24px.svg" alt="menu">
            </div>
        </div>
    </div>