ionic 3动态图像滑块在手动滑动后停止自动播放

Question

我正在从提供者 rest api 获取图像滑块数据。图像滑块适用于自动播放，但手动滑动后，图像滑块自动播放停止。当使用 ionViewDidEnter() 时会产生错误...

我的 .ts 文件如下

    import {Slides } from 'ionic-angular';
    .
    .
    .
    export class DemoPage {
    .
    .
    .
    @ViewChild(Slides) slides: Slides; 
    .
    .
    .
    allslider: any;
    .
    .
    constructor(public navCtrl: NavController, public navParams: NavParams,public popoverCtrl: PopoverController,public demoapiService: DemoApiProvider)   
    {    
    this.imgSlider();    
    } 

    imgSlider() { 
    this.demoapiService.getImgSlider()  
    .then(myslide => { 
    this.allslider= myslide ;   
    });  
    }

    ionViewDidEnter() 
    {
   // this.slides.autoplayDisableOnInteraction = false;
   // when used above statement then error is generated
    }

我的 .html 文件如下所示

    <ion-slides class="slide-css"   #slides *ngIf="allslider && allslider.length" [autoplay]="2000" [speed]="500" [loop]="true" pager>
    <ion-slide   *ngFor="let slide of allslider ">            
    <img src="http://localhost:8000/{{slide.img}}" />
    </ion-slide>
    </ion-slides>

参考 - ionic 3 image slider stops autoplay after manual sliding

Answer 1

您不能在 constructor() 中使用它，因为尚未完全创建 DOM。

所以你需要删除this.imgSlider();

 constructor()   
  {    
     //this.imgSlider();<--- need to remove this and use it inside the `ionViewDidEnter()` event.
  }

像这样：

 ionViewDidEnter() 
    {
      this.imgSlider();
    }

 imgSlider() { 
    this.demoapiService.getImgSlider()  
    .then(myslide => { 
       this.allslider= myslide ;   
       this.slides.autoplayDisableOnInteraction = false;
      });  
    }