angular - Carousel se strică după modificări. Cum să îl reîncărc/împrospătez?

De îndată ce imaginile afișate se schimbă, owl-carousel-ul meu se strică - cu alte cuvinte, toate slide-urile sunt listate unele printre altele.

Abordarea mea a fost să reîncarc/reîmprospătez caruselul atunci când apare o schimbare. Dar cum reîmprospătez owl-carousel cu Angular?

În cazul meu este currentCollection, care este un număr, care se schimbă cauzându-i defectarea:

<owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" *ngIf="collectionColors[currentCollection]">

    <div class="item" *ngFor="let i of buildArray(collectionColors[currentCollection].slidesNumber); let x = index"
    [ngStyle]="{'background-color': collectionColors[currentCollection].bgColors[x]}">
      <div class="container-fluid slider img-container" *ngFor="let slide of collectionColors[currentCollection][x]; let i = index" [class.d-none]="currentColor !== i"
           [ngStyle]="{
           'background-image': 'url(' + slide + ')',
           'background-position': collectionColors[currentCollection].positions[x],
           'background-size': collectionColors[currentCollection].size[x]
           }">
        <div class="container text-container" [ngStyle]="{
        'top': collectionColors[currentCollection].textPositions[x].top + '%',
        'left': collectionColors[currentCollection].textPositions[x].left + '%'
         }">
          <h1 class="text-right" [ngStyle]="{
          'color': collectionColors[currentCollection].textColors[x]
          }">{{collectionColors[currentCollection].text[x]}}</h1>
        </div>
      </div>
    </div>

</owl-carousel>