运动完成后，Ionic 2 不显示幻灯片

Question

这里我有 JSONOBJ 的结果：

我的 home.html 中有 ion-card，方法为 navigate()，如下所示：

    navigate(event, exercise, exercise2, exercise3, exercise4){    
      this.navCtrl.push(exerciseSlides, {
                clickedExercise: exercise,
                secondExercise: exercise2,
                thirdExercise: exercise3,
                fourthExercise: exercise4
      });
  }

这是两张牌：

 <ion-card *ngIf="oefening1" (click)="navigate($event, oefening1, oefening2, oefening3, oefening4)" class="{{ oefening1 }}" margin-vertical>
    <img src="assets/img/{{ oefening1 }}.jpg"/>
    <div *ngIf="exercise1IsDone || allExercisesDone" (click)="$event.stopPropagation()" class="overlay">
      <ion-icon name="checkmark-circle" class="checkmark"></ion-icon>
    </div>

    <ion-card-content>
      <ion-card-title>{{ oefening1 }}</ion-card-title>
      <p>Setjes: {{ set1 }}</p>
      <p>Herhalingen: {{ rep1 }}</p>
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="oefening2" (click)="navigate($event, oefening2, oefening1, oefening3, oefening4)" class="{{ oefening2 }}" margin-vertical>
    <img src="assets/img/{{ oefening2 }}.jpg"/>    
    <div *ngIf="exercise2IsDone || allExercisesDone" (click)="$event.stopPropagation()" class="overlay">
      <ion-icon name="checkmark-circle" class="checkmark"></ion-icon>
    </div>
    <ion-card-content>
      <ion-card-title>{{ oefening2 }}</ion-card-title>
      <p>Setjes: {{ set2 }}</p>
      <p>Herhalingen: {{ rep2 }}</p>
    </ion-card-content>
  </ion-card>

我有一个这样的练习幻灯片：

<ion-content>
  <ion-slides #exercisesSlider>
        <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>
                            <!--<button ion-button block [disabled]="!disabledBtn">Block Button</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>

                            {{ ex.done }}
                        </div>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-slide>
    </ion-slides>
</ion-content>

还有一个这样的练习幻灯片：

export class exerciseSlides {
  @ViewChild('exercisesSlider') slides: Slides;
  public fullPath: string;
  public disabledBtn: boolean;
  public allExercises: any[] = []; // INITIALIZE A VAR THAT'LL HOLD ALL EXERCISES
  public date: any = moment().format('L');

   constructor( public navCtrl: NavController, private streamingMedia: StreamingMedia, public params: NavParams, public modalCtrl: ModalController) {
        // GET ALL EXERCISES AND THE IMAGE PATH ON PAGE CONSTRUCRION
        this.allExercises.push({
            exercise: params.get("clickedExercise"),
            path: 'assets/img/' + params.get("clickedExercise") + '.jpg',
            done: false
        });
        this.allExercises.push({
            exercise: params.get("secondExercise"),
            path: 'assets/img/' + params.get("secondExercise") + '.jpg',
            done: false
        });
        this.allExercises.push({
            exercise: params.get("thirdExercise"),
            path: 'assets/img/' + params.get("thirdExercise") + '.jpg',
            done: null
        });
        this.allExercises.push({
            exercise: params.get("fourthExercise"),
            path: 'assets/img/' + params.get("fourthExercise") + '.jpg',
            done: null 
        });     

        this.disabledBtn = false;
    }

    ionViewDidEnter() {
        // block the swipe to change page
        this.slides.lockSwipes(true);     
    }

    nextExercise(i, id, done) {
        this.slides.lockSwipes(false);
        this.slides.slideNext();
        this.slides.lockSwipes(true);

        //Here is set the done value of opened slide to true, but gets overrided by the constructor.
        this.allExercises[i].done = true;

        console.log(this.allExercises[i].done);

        if (this.allExercises[i].exercise == 'lagerugklacht'){
            console.log('check', this.allExercises[i]);
            localForage.setItem('exercise1IsDone', [this.allExercises[i].exercise, this.allExercises[i].done]);    
            console.log('localForageItem: ', localForage.getItem("exercise1IsDone"));
        }

        let modal = this.modalCtrl.create(ModalPage);
        modal.present();

        if(i == 3){
            console.log("lastOne");
            this.navCtrl.push(HomePage);
            localForage.setItem('didAllExercises', [true, this.date]);
        }
    }
}

如何将 this.allExercises[i].done 的值设置为 true 并创建一个 *ngIf 以检查锻炼是否完成，以及何时完成而不是不再显示幻灯片？

allExercises.done 将始终首先输入为 false，因为我在构造函数中将其设置为在发出 nextExercise() 后它会更改，但是如何在数组中将 allExercises.done 的属性更改为 true 并保持为真？因此，如果它完成了，它必须跳过该幻灯片并继续下一张未完成的幻灯片。

Answer 1

所以你可以这样做：

您需要更新您的数据库，以便每个练习都有一个done 字段。

不知道你有多少练习，只选4个done: false。

拥有您的用户可以随时看到的离线数据真的很好，但由于这是一个获取视频的应用程序，我认为没有必要为此保留 localForage/localStorage，只有当您有一个用户的页面时可以看到他做了什么练习。

不要保存数组，这很糟糕，很丑陋，对你来说不太好操作。使用对象

所以在你的nextExercise 上你可以这样做

nextExercise(i, id, done) {
  // SAVE YOUR EXERCISE FOR THIS USER ON YOUR DATABASE, YOU HAVE THE EXERCISE ID
  // IT'S SO MUCH EASIER FOR YOU TO KEEP TRACK.
  // AND IF THE USER DELETES THE APP AND INSTALL AGAIN, YOU CAN DOWNLOAD HIS PROGRESS
  saveYourExerciseMethod().then(() =>{
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);

    // I DON'T KNOW HOW LOCALFORAGE WORKS, BUT IF YOU HAVE A STATIC 'exercise1IsDone'
    // THEM IT'LL ALWAYS OVERRIDE THAT EXERCISE, YOU'LL NEVER COMPLETE ANOTHER
    // EXERCISE
    // YOU'LL NEED TO SAVE AN OBJECT WITH ALL YOUR EXERCISES COMPLETED OR
    // SET THE NAME DINAMICALLY
     localForage.setItem(this.allExercises[i].exercise, { exercise: this.allExercises[i].exercise, done: true]);

    // DON'T KNOW WHAT THIS DO, SO I1LL NOT CHANGE IT
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();

    if(i == 3){
        this.navCtrl.push(HomePage);
        localForage.setItem('didAllExercises', {completed: true, date: this.date});
    }
  });
}

就我了解您的代码和应用程​​序而言，这就是我可以为您提供的信息。无法发布更多代码，因为这是我所看到的。

希望对你有帮助