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

我该怎么解决这个问题呢？

请给予建议。

谢谢。

- ANISUNDAR

---

请尝试添加类似于这样的*ngif：<ion-slides *ngIf="PImage && PImage.length" autoplay="5000"...>...</ion-slides>，看看能否解决问题？似乎问题可能与数据准备好之前创建幻灯片有关... - sebaferreras

谢谢您的回复。它正常工作了。：） - ANISUNDAR

很高兴听到这个消息！我已经添加了一个答案，并附上了与此相关的一个问题的链接 :) - sebaferreras

你可以这样做：<ion-slides #slides *ngIf="sliderImages && sliderImages.length" autoplay="3000" loop="true" speed="500" pager="true"> <ion-slide *ngFor="let item of sliderImages"> <img src="{{item.image}}" alt=""> </ion-slide> </ion-slides> - Sumit Kumawat

Answer 1

在创建幻灯片元素时，当数据尚未准备好时似乎存在问题。要解决此问题，请使用*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>

- sebaferreras

---

{btsdaf} - Mohan Gopi

老兄，我已经为此奋斗了好久！ngIf解决方案为我解决了问题。谢谢。 - Kirsten

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

- Snowbases