ionique 2 ne montrent pas des diapositives lorsque l'exercice est fait

Question

Ici, j'ai le résultat de la JSONOBJ:

Je ion-card dans mon home.html avec la méthode navigate() qui ressemble à ceci:

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

et ceux-ci sont deux des cartes:

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

J'ai un exerciseSlides.html comme ceci:

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

Et un exerciseSlides.ts comme celui-ci:

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

Comment définir la valeur de this.allExercises[i].done true et créer un *ngIf pour vérifier si l'exercice est fait, et quand son fait que ne montre pas glisser plus?

Le allExercises.done va entre toujours premier à faux parce que je mets que dans le constructeur, il change après émets la nextExercise() mais comment puis-je changer le poperty de allExercises.done à true dans le tableau et reste vrai? Donc, si c'est fait, il doit sauter cette diapositive et passer à la suivante qui n'est pas fait.

Answer 1

Alors, voici ce que vous pouvez faire:

Vous devez mettre à jour votre base de données pour tous les exercices ont un champ done.

Je ne sais pas combien d'exercices avez-vous, mais sélectionnez seulement 4 où done: false.

Il est vraiment bon d'avoir des données hors ligne que votre utilisateur peut voir à tout moment, mais puisque c'est une application qui récupère des vidéos, je pense qu'il n'est pas nécessaire de garder localForage/localStorage pour cela. l'utilisateur peut voir quels exercices il a fait. Ne pas enregistrer les tableaux, c'est mauvais, c'est moche, ce n'est pas très bon pour vous de manipuler. Utilisez les objets

donc sur votre nextExercise vous pouvez le faire

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

Pour autant que j'understod votre code et de l'application, ce que je peux vous adivise. Impossible de poster plus de code car c'est ce que je peux faire pour ce que j'ai vu.

Hope this vous aide