離子2不顯示幻燈片時練習做

Question

在這裏，我有JSONOBJ的結果：在我的Home.html與方法navigate()它看起來像這樣

我有ion-card：

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

而這些卡片2：

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

我有一個exerciseSlides.html這樣的：

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

而一個exerciseSlides.ts這樣的：

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到真正的價值，創造一個*ngIf檢查，如果運動做，而當其做得比不顯示再滑？

的allExercises.done總是首先進入到假的，因爲我設置的是，在構造函數中我發出後nextExercise()，但我怎樣才能改變allExercises.done的poperty到真正的數組中，並保持忠於它的變化？所以如果它完成了，它必須跳過那張幻燈片，然後繼續下一個沒有完成的幻燈片。

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

所以據我understod您的代碼和應用程​​序，這是我能adivise你。無法發佈更多的代碼，因爲這是我所能做的，我所看到的。

希望這有助於你