web-dev-qa-db-ja.com

Ionic 3スライドが自動再生で機能しない

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

この問題を修正するにはどうすればよいですか？

親切にアドバイスしてください、

ありがとう

angulartypescriptionic-frameworkionic2ionic3
6
ANISUNDAR

スライド要素を作成しようとすると、データの準備ができていないときに 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>
18
sebaferreras

誰かが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

0
Snow Bases