离体2在锻炼完成时不显示幻灯片 [英] Ionic 2 do not show slides when exercise is done
问题描述
这里我有JSONOBJ的结果：
Here I have the outcome of the JSONOBJ:
我有离子卡在我的home.html中使用方法 navigate（），如下所示：
I have ion-card in my home.html with the method navigate() which looks like this:
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：
I have an exerciseSlides.html like this:
<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：
And an exerciseSlides.ts like this:
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 以检查是否已完成练习，并且当它完成时不再显示幻灯片？
How do I set the value of this.allExercises[i].done to true and create an *ngIf to check if exercise is done, and when its done than do not show slide anymore?
allExercises.done 将始终首先输入false，因为我在我发出 nextExercise（）之后在构造函数中设置它，但是如何更改 allExercises.done 的属性>在数组中为true并保持为真？所以，如果它完成了它必须跳过那张幻灯片并继续下一个未完成的。
The allExercises.done will always enters first to false because I set that in the constructor it changes after I emit the nextExercise() but how can I change the poperty of allExercises.done to true in the array and stays true? So if its done it has to skip that slide and move on to the next one which is not done.
推荐答案
所以这是什么你可以这样做：
So here's what you can do:
你需要更新你的数据库，这样每次练习都有完成字段。
You'll need to update your database so every exercise have a done field.
我不知道你有多少运动，但是只选择4，其中已完成：false 。
I don't know how much exercises do you have, but select only 4 where done: false.
拥有您的用户随时可以看到的离线数据真的很不错，但由于这是一个获取视频的应用程序，我认为没有必要为此保留localForage / localStorage，只有当你有一个页面，用户可以看到他做了什么练习。
It's really good to have offline data that your user can see at anytime, but since this is a app that fetchs videos i think there's no need for keeping a localForage/localStorage for this, only if you have a page where the user can see what exercises he has done.
不要保存数组，这很糟糕，它很丑，对你来说不太好操纵。使用对象
Don't save arrays, it's bad, it's ugly, it's not so good for you to manipulate. Use objects
所以在 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});
}
});
}
所以，就我的代码和应用程序而言，这就是我能做到的恭喜你无法发布更多代码，因为这是我能为我所见过的事情。
So as far as i understod your code and application, this is what i can adivise you. Can't post more code because this is what i can do for what i've seen.
希望这可以帮到你
这篇关于离体2在锻炼完成时不显示幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
