离子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你。无法发布更多的代码，因为这是我所能做的，我所看到的。

希望这有助于你