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的答案。

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

1 个答案: