Ionic 3 幻灯片不适用于自动播放

Question

我正在使用 ionic 3。

这是我的模板

 <ion-slides autoplay="5000" loop="true" speed="500" class="slides" pager="true">
      <ion-slide *ngFor="let Image of PImage">
         <img src="{{Image.URL}}" alt="Product Image">
      </ion-slide>
 </ion-slides>

但是我收到这个错误

TypeError: Cannot read property 'hasAttribute' of undefined

我该如何解决这个问题？

多多指教，

谢谢

Answer 1

在尝试创建幻灯片元素时似乎出现 issue，但数据尚未准备就绪。要修复它，请使用 *ngIf 仅在数据准备就绪时创建幻灯片：

<ion-slides *ngIf="PImage && PImage.length"  autoplay="5000" loop="true" speed="500" class="slides" pager="true">
      <ion-slide *ngFor="let Image of PImage">
         <img src="{{Image.URL}}" alt="Product Image">
      </ion-slide>
 </ion-slides>

Answer 2

如果有人使用 Ionic 4，那么试试这个方法：

HTML:

  <ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad()" autoplay="5000" loop="true" speed="500" class="slides" pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let adsImages of AdsImages">
      <img src="{{adsImages}}">
    </ion-slide>
  </ion-slides>

TS:

  AdsImages = [
    "../../assets/images/ads-sample.webp",
    "../../assets/images/ads-sample2.webp",
    "../../assets/images/ads-sample3.webp"
  ];

  slideOpts = {
    zoom: false
  };

  @ViewChild("mySlider") slides: IonSlides;

  slidesDidLoad() {
    this.slides.startAutoplay();
  }

SCSS:

ion-slides {
  --bullet-background: #ffffff;
  --bullet-background-active: #b8b8b8;
}

更多信息：https://ionicframework.com/docs/api/slides

Ionic 3 幻灯片不适用于自动播放

Ionic 3 slide not working with autoplay

typescript

ionic-framework

ionic2

ionic3

angular