使用 ngIf 时 Angular Swiper 不工作答案

【问题标题】：Angular Swiper not working when using ngIf使用 ngIf 时 Angular Swiper 不工作
【发布时间】：2021-01-04 22:39:31
【问题描述】：

如果我添加此行<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

【问题讨论】：

请在您的代码中添加一个最小复制示例（例如通过 StackBlitz）。那么帮助你就容易多了。阅读有关它的更多信息 stackoverflow.com/help/minimal-reproducible-example
@Roy 我刚刚添加了一个简单的示例，请看一下。谢谢。

标签： angular swiper

【解决方案1】：

我尝试使用swiper.appendSilde(<div class="swiper-slide">content</div>)，它在控制台中喊出一堆undefined classNames 错误，仍然有效，但真的很烦人。

当我删除 *ngIf 时，swiper 工作正常，但是当没有从服务器加载图像 url 时，控制台日志再次充满 undefined 错误。

当所有image url 从服务器加载时，我必须创建一个字段imagesLoaded = false; 并将其设置为true。

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

我不喜欢它，但至少控制台现在很清晰。

【讨论】：