* ngFor вызывает прерывание дочернего компонента

Question

Я создал собственный компонент карусели, и меня немного смущает, почему ngFor не работает при использовании в родительском компоненте.

Есть ли лучший способ решения этой проблемы?

Это работает

Без использования ngFor в родительском компоненте:

<div class="row">
  <div *ngFor="let component of components | filter: searchText | sort: 'name'; let i = index">
    <div class="col-md-12 component-holder">
      <div class="component-heading">{{ component['displayName'] }}</div>
      <app-carousel
        [carouselItemId]="i"
        [carouselItemParentComponent]="'builder-sidebar-components'"
        [carouselItemButtonHeight]="120"
        [carouselItemButtonLeftPosition]="0"
        [carouselItemButtonRightPosition]="270"
      >
        <div
          class="item"
          draggable="true"
          (click)="clearActiveComponent()"
          (dragstart)="onComponentSelect(getComponent(component['name']))"
          (dragend)="clearActiveComponent()"
          [attr.data-cy]="'component-icon'"
        >
          <img alt="test" src="https://picsum.photos/320/240?pic=1" />
        </div>
        <div
          class="item"
          draggable="true"
          (click)="clearActiveComponent()"
          (dragstart)="onComponentSelect(getComponent(component['name']))"
          (dragend)="clearActiveComponent()"
          [attr.data-cy]="'component-icon'"
        >
          <img alt="test" src="https://picsum.photos/320/240?pic=2" />
        </div>
        <div
          class="item"
          draggable="true"
          (click)="clearActiveComponent()"
          (dragstart)="onComponentSelect(getComponent(component['name']))"
          (dragend)="clearActiveComponent()"
          [attr.data-cy]="'component-icon'"
        >
          <img alt="test" src="https://picsum.photos/320/240?pic=3" />
        </div>
      </app-carousel>
    </div>
  </div>
</div>

Вывод:

This doesn't work

Using ngFor in parent component:

 {{компонент ['displayName']}}  тест     

Вывод:

Child component remains the same

In child component: