Question

我的应用程序中有滑块：

<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
      <ion-slide *ngFor="let image of product.show_images;">
        <img [src]="image.big_url" alt="{{image.title}}"/>
      </ion-slide>
    </ion-slides>

在代码中我需要更改幻灯片和幻灯片的数量。但在更改幻灯片列表后。滑块更改，但第一张幻灯片没有显示，或者可以显示，但幻灯片的点不是应该的。如何更改幻灯片列表？我要改变的代码是：

this.slider.getSlider()['removeAllSlides'](); // Delete slides
this.product.changeOffer();
this.product.show_images = this.product.getImages();

Answer 1

模板：

<ion-slides #showSlider *ngIf="product.show_images" class="slideShowWrapper productImages" [options]="mySlideOptions">
   <ion-slide *ngFor="let image of product.show_images;">
     <img [src]="image.big_url" alt="{{image.title}}"/>
   </ion-slide>
</ion-slides>

代码：

export class ProductBlocksProductPage extends AbstractBlock{ 
   mySlideOptions: any

   @ViewChild('showSlider') slider: Slides; //Access to slider
   @Input() slideOptions = {}; // Slider options
   constructor(){

   }  



   /**
   * Change the images action
   */
  changeOffer()
  {
    this.product.changeOffer(); //Here is your function to change of our images array
    // Update slider
    this.slider.getSlider().update(); //Reinit slider
    this.slider.getSlider().slideTo(0, 0, true); //Move to first slider
  }
}

如何在Ionic 2上改变离子载玻片的动态滑动？

1 个答案: