2

I am trying to pull off a "trick" in ionic2 as follows: - I have one slide set to loop. - When the slide is swiped I increase or decrease a variable - that variable will cause different data to display in the slide.

This way I can get the full UI experience of the slides component without hardcoding or pre-loading all the other slides. For eg lets say you are viewing data by day, I want to be able to slide back and forth to look at data from previous days. Given the change I will just reload the relevant days data.

It ALMOST works except that the slider doesnt seem to refresh properly when looping. Take a look this http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide>Slide{{newval}}
   Test 
   </ion-slide>
 </ion-slides>
</ion-content>

Controller

export class HomePage {

  appName = 'Ionic App';
  newval: number = 0;
  constructor(public navController: NavController) { }

   slideChanged(step: number) {
        this.newval = this.newval + step;
   }
}

If you swipe back and forth the text doesnt change. It should increase or decrease eg Slide 1, Slide 2 etc... BUT do a few swipes and then instead of swiping just click down on the slide and move it a little and THEN the label does refresh to give you the correct value! Its almost like because I am looping - all thats displayed is the original slide value and not the updated value, until I click somewhere on the slide causing it to refresh.

So bottom line I assume this is a bug? Is there any way I can trigger this "refresh" behaviour programmatically?

Thanks

Gotts
  • 2,274
  • 3
  • 23
  • 32
  • I would suggest looking into using `NgZone`. I am using that to do any refresh when I have a change in the contents to be display. However, I am using an older version of Ionic 2 that is in JS so am not sure of the syntax for TS. So unable to give you a full source code – Huiting Feb 10 '17 at 06:32
  • However, I will be thinking you would already some data that you wish to display. Usually ngFor to loop through the data work fine for me without having to do any refresh – Huiting Feb 10 '17 at 06:34
  • Yes I am using ngFor on a collection. It only works when I click down on the slide and move it a little...only then does it refresh to show the correct data – Gotts Feb 10 '17 at 12:46
  • Able to post the code portion for ngFor? Cause I am using it and the data changes when I swipe for the slides – Huiting Feb 13 '17 at 01:15
  • Not entirely sure what you mean. the ngFor is for the content within the slide and its all the slide content that isnt changing. Whether its static content or content generated from an ngFor I just added a list generated by an ngFor and the slide content still doesnt change until I click down onto it. http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview – Gotts Feb 13 '17 at 11:48
  • Cool trick, i will try to get it work once i am back from pto. – Sergey Rudenko Sep 16 '18 at 04:57

2 Answers2

-2

Hi change your code for home.page.html to:

 <ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide *ngFor="let item of items">Slide {{newval}}
       <ion-list>
         {{item}}
       </ion-list> 
   </ion-slide>
 </ion-slides>

I have tested it in plunker and the content will change when you slide. Do ngFor for each ion-slide instead of within the ion-slide

Huiting
  • 1,368
  • 7
  • 24
  • 1
    Of course that will work because thats generating a new ion-slide for each item, so its pre-loaded and its working the way ion-slide normally works if you had actually pre-defined all the slides. My whole point here is that I am trying to get away with 1 slide in order to get the UI experience and just refresh the data on the slide when it slides. And thats not refreshing! – Gotts Feb 14 '17 at 06:56
-2

Try this ionic 3

<ion-slides loop="true" autoplay="1" speed="6000">
   <ion-slide>Slide A</ion-slide>
   <ion-slide>Slide B</ion-slide>
   <ion-slide>Slide C</ion-slide>
</ion-slides>
Sruthi
  • 2,908
  • 1
  • 11
  • 25
Saint Deemene
  • 1