Here is the result of the JSONOBJ:https://i.sstatic.net/8vyQd.png
In my home.html file, I have ion-card containing a method called navigate(), which is structured as follows:
navigate(event, exercise, exercise2, exercise3, exercise4){
this.navCtrl.push(exerciseSlides, {
clickedExercise: exercise,
secondExercise: exercise2,
thirdExercise: exercise3,
fourthExercise: exercise4
});
}
Below are two examples of the cards:
<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>Sets: {{ set1 }}</p>
<p>Repetitions: {{ 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>Sets: {{ set2 }}</p>
<p>Repetitions: {{ rep2 }}</p>
</ion-card-content>
</ion-card>
The structure of my exerciseSlides.html page is as follows:
<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>
<button *ngIf="i > 0" ion-button round (click)="previousExercise()">Previous</button>
<button *ngIf="i < 4" ion-button round (click)="nextExercise(i, ex.exercise, ex.done)">Complete</button>
{{ ex.done }}
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
</ion-content>
The content of my exerciseSlides.ts file looks like this:
export class exerciseSlides {
@ViewChild('exercisesSlider') slides: Slides;
public disabledBtn: boolean;
public allExercises: any[] = [];
public date: any = moment().format('L');
constructor( public navCtrl: NavController, private streamingMedia: StreamingMedia, public params: NavParams, public modalCtrl: ModalController) {
// The rest of the code for initializing exercises and paths
this.disabledBtn = false;
}
// More methods included here...
}
How can I update the value of this.allExercises[i].done to true and implement an *ngIf condition to check if an exercise is done in order to hide completed slides?
The allExercises.done property always defaults to false due to the constructor setup. How can I ensure that once an exercise is marked as done, it remains true in the array, allowing the app to skip over completed slides and focus on pending ones?