Ionic3 中自动播放的离子幻灯片答案

【问题标题】：Ion-slides with auto play in Ionic3Ionic3 中自动播放的离子幻灯片
【发布时间】：2017-10-19 03:09:42
【问题描述】：

我在主页上使用了 ion-slides，但它不适用于自动播放。

离子代码：

    <ion-slides autoplay=300>
      <ion-slide  *ngFor = "let banners of bannersImage">
        <img src={{banners.image}}>
      </ion-slide>
    </ion-slides>

错误信息：

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (main.js:43827)
    at startAutoplay (main.js:43870)
    at initSwiper (main.js:43816)
    at Slides._initSlides (main.js:55290)
    at main.js:55311`enter code here`

【问题讨论】：

*ngFor 是一个单词
是的 ngfor 是我们正在使用的单个单词
这对我有用 - 1) html: <ion-slides [autoplay]="autoPlay"><ion-slide></ion-slide></ion-slides> 2) ts: this.autoPlay = 3000 告诉我。

标签： angular typescript ionic2 ionic3

【解决方案1】：

我有解决办法：这样做

<ion-slides *ngIf="slideData && slideData.length" autoplay="5000" class="slideroption" pager="true"   loop="true" speed="300">
      <ion-slide   *ngFor="let slide of slideData">
                <img src="{{slide.imag}}" />
          </ion-slide>
    </ion-slides>

【讨论】：

谢谢！ *ngIf="slideData && slideData.length" 对我有用。

【解决方案2】：

文件.ts

 ngAfterViewInit() {  setTimeout(()=>{
         if(this.topProducts && this.topProducts.length > 0){
            this.slides.freeMode = true;
              this.slides.autoplay = 2000;
              this.slides.speed = 500;
              this.slides.loop = true;
              this.slides.startAutoplay()
          }

          },1000)
        }

【讨论】：

【解决方案3】：

你错过了自动播放属性中的""，应该是这样的：

<ion-slides autoplay="300">
  <ion-slide *ngFor="let banners of bannersImage">
    <img [src]="banners.image">
  </ion-slide>
</ion-slides>

顺便说一句，使用属性时，最好使用属性绑定而不是插值：

[src]="banners.image" 而不是src={{banners.image}}。

【讨论】：