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

【问题标题】：Ionic 3 slide not working with autoplayIonic 3 幻灯片不适用于自动播放
【发布时间】：2017-12-10 00:16:22
【问题描述】：

我正在使用离子 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

我该如何解决这个问题？

请多多指教，

谢谢

【问题讨论】：

您能否尝试添加这样的 *ngif：<ion-slides *ngIf="PImage && PImage.length" autoplay="5000"...>...</ion-slides>？似乎问题可能与在数据准备好之前创建的幻灯片有关......
感谢您的回复。一切正常。:)
很高兴听到这个消息！我已将其添加为与此相关的一个问题的链接的答案:)
你可以这样做

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案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>

【讨论】：

感谢您的回答，我遇到了一个问题，例如当我第一次加载页面时幻灯片正在自动播放，但是当我转到某个页面并返回幻灯片所在的同一页面时那个时候不工作。
伙计，我已经为此烦恼了很久！ ngIf 解决方案为我修复了它。谢谢

【解决方案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;
}

【讨论】：