search

ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

bug: Ionic2 ion-slides not properly working with *ngFor #89

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Type: bug

Ionic Version: 2.x

Platform: all

Hey Ionic 2 team,

Ionic 2 ion-slides component seems to be working properly when ion-slide are either hardcoded into the template or when they are created with a ngFor iterating over an array that is not empty/not modified. If the ngFor is first iterating over an empty array and then the array is modified, the slides seems to be broken (in particular, looping is not working properly).

This bug can maybe be generalised to any ion-slides that are dynamically added/removed after the first creation of the ion-slides but I have not tested this.

To reproduce the bug, clone, install and launch the sample app of this repo: https://github.com/4ian/ionic2-slides-test

Click on the button to fill the array used to generate the slides. The second slider won't work properly. The first slider will be working but I've used a workaround: the slider is not created when the array is empty.

greaterking commented 5 years ago

Confirming this is still an issue in ionic4. @kinglionsoft https://github.com/ionic-team/ionic/issues/6515#issuecomment-317675921 suggested using a 500 millisecond timeout to call update() this actually worked for me.


    setTimeout(()=>{
      this.slider.update(); //slider ..the ion-slides instance
    }, 500);

Even 100 millisecond worked for me as well (it may depend on how large the number of slides you have is.
sjokoladepudding commented 5 years ago

i use this

html: (ionSlideDrag)="ionSlideDrag()"

ts: ionSlideDrag() { if (this.slider.length() > 0) { if ((this.slider.getActiveIndex() + 1) == this.slider.length()) { this.slider.lockSwipeToNext(true); } else { this.slider.lockSwipeToNext(false); } } }

dexterrustia commented 4 years ago

Di anyone already find the solution for this? i already tried everything suggest in the previous post(https://github.com/ionic-team/ionic/issues/6515) like delaying the loading of the slides to wait for the data to come in but this doesn't work for me.. i also try *ngIf on the parent element but same thing. any advice is much appreciated. THANKS