Ionic 2 - this.slides.slideNext()无法正常工作

时间:2017-05-10 14:37:49

标签: angular typescript ionic2 localforage

我在一系列项目中使用*ngFor来设置我的幻灯片:

<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>

这是我的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);
    }

ionWillLeave方法中,我设置了localStorage项:

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

每个console.log都正确显示,但nextSlide()无效。

所以基本上我在离开视图时设置了一个数组,并访问该数组并通过它创建for loop,如果我看到下一个练习完成,则必须转到下一张幻灯片。

有关其他信息,您可以查看:[{3}}

我尝试过:this.slides.slideTo(3, 200, false);没有显示最后一个,但是当我运行此代码时:let isLast = this.slides.isEnd(); // return true or false value console.log(isLast);这会返回true。但是没有显示,那么如何让this.slides.slideNext()显示if statement中的下一张幻灯片呢?

1 个答案:

答案 0 :(得分:2)

我必须在this.slides.lockSwipes(false)之后添加this.slides.lockSwipes(true)slideNext()这是getItem函数:

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