Angular 使用 ngIf 時 Swiper 不工作

Question

如果我添加此行<ng-container *ngIf="productColor.images"> ，Swiper 將根本無法工作並且在控制台中不會顯示任何錯誤。 知道如何解決這個問題嗎？

<swiper *ngIf="productColors" [slidesPerView]="1" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()">
    <ng-container *ngFor="let productColor of productColors._embedded.productColors">
      <ng-container *ngIf="productColor.images">
        <ng-container *ngFor="let image of productColor.images._embedded.images">
          <ng-template swiperSlide>
            <img [src]="server.cloudFront + image.url" alt="Oops!" style="max-width: 100%">
          </ng-template>
        </ng-container>
      </ng-container>
    </ng-container>
  </swiper>

這是一個示例： https://stackblitz.com/edit/swiper-angular-example-j8jxpp?file=src/app/app.component.ts

Answer 1

我嘗試使用swiper.appendSilde(<div class="swiper-slide">content</div>)在控制台中喊出一堆undefined classNames錯誤，仍然有效，但真的很煩人。

當我刪除 *ngIf 時，swiper 工作正常，但是當圖像 url 未從服務器加載時，控制台日志再次充滿undefined的錯誤。

我必須創建一個字段imagesLoaded = false; 並在從服務器加載所有image url時將其設置為true 。

在模板中只寫： <swiper *ngIf="imagesLoaded"...>...</swiper>

我不喜歡它，但至少控制台現在很清楚。