如何在源数组更改后从特定索引以角度启动引导轮播

Question

我在 Angular 组件中有一个引导轮播。 这些项目从数组中加载 ngFor。 在旋转木马下我有一些缩略图。 我需要做的是当用户单击一个缩略图时，轮播将收到相同的数组，但修改为源，具有不同的图像并且比第一个数组更大，并从不同的索引开始轮播（缩略图的索引来自下面），而不是从 0 开始。 问题是当我第一次单击缩略图时（当源更改时），轮播总是从 0 开始，而不是从我使用 $('.carousel').carousel(idx) 发送的索引开始。 我该如何解决这个问题？

<div class='carousel-item' *ngFor="let img of carouselGallery" let i = index"
    <div class="carousel-item-image">
        <img [src]="img.src" alt="{{img.alt}}" class="slide-image">
    </div>
</div>

<li *ngFor="let image of gallery; let j = index" 
(click)="switchImageList(j)">
    <img [src]="image.src" alt="{{image.alt}}">
</li>

switchImageList(idx: number) {
    this.carouselGallery.length = 0;
    this.carouselGallery = this.galleryImages.slice(); // copy the larger gallery
    $('.carousel').carousel(idx);
    $('.carousel').carousel('cycle');
}

Answer 1

ngFor 不会监听源中的更改，因为它没有绑定到源变量。这一点，它在调用函数之前只呈现一次并且不再改变。使用 ngIf 禁用该列表并在调用函数后启用。

你也可以关注THIS的回答。