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
?
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);
}
}
}
});