web-dev-qa-db-ja.com

Ionic 4スライダーの自動再生

ionic=スライダーを自動的にスライドさせたいのですが、機能しません。スライダーには画像も含まれています。データはAPI呼び出しから取得されます。

  <ion-slides  autoplay="5000" loop="true" speed="300" pager="true" >
        <ion-slide *`ngFor`="let item of topStories">
            <ion-card (click)=" this.newsService.onGoToTopStoryPage(item)">
                <ion-card-content >
                    <ion-img [src] = "item.image"></ion-img>
                    <h2> <b>{{item.title}} </b></h2>
                    <h4>{{item.summary}}</h4>
            </ion-card-content>
            </ion-card>
        </ion-slide>
       </ion-slides>
5

あなたはレース状態に遭遇したと思います。要素は、データ(topStories)の準備が整う前にレンダリングされた可能性があります。その場合、「自動再生」するスライドはありません。

* ngIfを要素に配置して、データの準備ができたときに要素をレンダリングしてください。例えば:

this.data_loaded = false;
...

this.apiGetData().then((data) => {
    ...
    this.data_loaded = true;
});


######################################

<ion-slides *ngIf="data_loaded">
...
</ion-slides>
0
Sem