angulartypescriptionic2localforage

Ionic 2 - this.slides.slideNext() not working properly


I use an *ngFor through an array of items to set my slides:

<ion-slides #exercisesSlider (ionSlideDidChange)="slideChanged()" pager>
   <ion-slide *ngFor="let ex of allExercises; let i = index" id="{{ ex.exercise }}"
         <ion-grid>
             <ion-row>
                <ion-col col-12>
                    <div (click)="playVid(ex.exercise)" padding-bottom>
                        <img [src]="ex.path" />
                     </div>
                     <div text-center>
                     <!-- can't go back if it's the first exercise -->
                     <button *ngIf="i > 0" ion-button round (click)="previousExercise()">Vorige</button>
                     <!-- will not have a next exercise if it's the last one -->
                     <button *ngIf="i < 4" ion-button round (click)="nextExercise(i, ex.exercise, ex.done)">Voltooi</button>

                    </div>
                </ion-col>
              </ion-row>
           </ion-grid>
        </ion-slide>
</ion-slides>

this is my nextExercise():

nextExercise(i, id, done) {    
        localForage.getItem("data").then((exDone) => {
            console.log("dataArrayGetItem: ", exDone);
            this.testArray.push(exDone);
            console.log('testArray: ',this.testArray);

            if(this.testArray){
                for(let i = 0; i < this.testArray.length; i++){
                    console.log('forLoop testArray:', this.testArray[i][i]);
                    console.log(this.testArray[i][i].exercise,this.testArray[i][i].done, 'done');
                     if(this.testArray[i][i].done){
                        console.log('DONEEEE!!!');
                        this.slides.slideNext();
                    }

                    if(this.testArray[i].done && this.testArray[i].exercise == this.allExercises[i].done){
                        console.log('DONEEEE!!!');
                        this.slides.slideNext();
                    }
                }
            }
        });        

        let results = this.allExercises[i];
        this.dataArray.push(results);        
        console.log('this.dataArrayPush: ',this.dataArray);
    }

And here in the ionWillLeave method I set the localStorage item:

ionViewWillLeave(){ 
        localForage.setItem("data", this.dataArray).then((exResults) => {
            console.log("dataArraySetItem: ", exResults);
        });
    }

Every console.log is showing correctly but the nextSlide() is not working properly.

So basically I set an array when I leave the view, and acces that array and make an for loop through it and if I see that the next exercise is done it has to go to the next slide.

For some additional info you could check this out: LINK

I have tried: this.slides.slideTo(3, 200, false); that doesn't show the last one but when I run this code: let isLast = this.slides.isEnd(); // return true or false value console.log(isLast);this returns true. But isn't showing, so how can I make it work that this.slides.slideNext() shows the next slide in the if statement?


Solution

  • I had to added this.slides.lockSwipes(false), this.slides.lockSwipes(true) after slideNext() Here is the getItem function:

    localForage.getItem("data").then((exDone) => {
                this.exercisesDoneArray.push(exDone);
    
                if(this.exercisesDoneArray){
                    for(let i = 0; i < this.exercisesDoneArray.length; i++){
                         if(this.exercisesDoneArray[i][i].done && this.exercisesDoneArray[i][i].exercise == this.slides.clickedSlide.nextElementSibling.id){
                            this.slides.lockSwipes(false);
                            this.slides.slideNext();
                            this.slides.lockSwipes(true);
                        }
                    }
                }
            });