Question

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

Answer 3

HTML code
 <ion-slides    id='slides1' (ionSlidesDidLoad)="autoplayslide()" #slider (ionSlideDidChange)="slidechange()" pager='true'>
  <ion-slide *ngFor="let img of imgs;">
 <img src="{{img}}">  </ion-slide>
</ion-slides>

TS code
import { IonSlides  } from '@ionic/angular';
@ViewChild('slider') slides: IonSlides ;
...
imgs=['url1','url2','url3']; //use your image links here
autoplayslide(){
    this.slides.startAutoplay();
  }
slidechange(){
    let currentIndex = this.slides.getActiveIndex().then((index)=>{
    console.log(index);

    if(index==this.imgs.length-1){
      setTimeout(()=>{this.slides.slideTo(0,3000);},5000);
    }
    else{
      setTimeout(()=>{this.slides.slideTo(index+1,1000);},5000);
    }
});
      
  }

这肯定有帮助...

Ionic 3幻灯片无法使用自动播放

3 个答案: