2

我使用*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通过它，如果我看到下一个练习已经完成，它必须转到下一张幻灯片。

有关一些其他信息，您可以查看：链接

我已经尝试过：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？

4

1 回答 1

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);
                    }
                }
            }
        });
于 2017-05-10T18:19:21.087 回答