运动完成后，Ionic 2 不显示幻灯片 [英] Ionic 2 do not show slides when exercise is done
问题描述
这里我有 JSONOBJ 的结果:
我的 home.html 中有 ion-card 方法 navigate() 如下所示:
导航(事件，练习，练习 2，练习 3，练习 4){this.navCtrl.push(exerciseSlides, {clickedExercise:锻炼，第二个练习:练习2，第三个练习:练习3，第四个练习:练习4});}这是其中的两张牌:
<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><ion-card-content><ion-card-title>{{ oefening1 }}</ion-card-title><p>Setjes: {{ set1 }}</p><p>赫哈林根:{{ 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>
<ion-card-content><ion-card-title>{{ oefening2 }}</ion-card-title><p>Setjes: {{ set2 }}</p><p>赫哈林根:{{ rep2 }}</p></ion-card-content></ion-card>
我有一个像这样的 executionSlides.html:
<ion-slides #exercisesSlider><ion-slide *ngFor="let ex of allExercises; let i = index" id="{{ ex.exercise }}"><离子网格><离子行><ion-col col-12><div (click)="playVid(ex.exercise)" padding-bottom><img [src]="ex.path"/> </ion-col></ion-row></离子网格></ion-slide></ion-slides></离子含量>
还有一个这样的练习Slides.ts:
export class practiceSlides {@ViewChild('exercisesSlider') 幻灯片:幻灯片；公共完整路径:字符串；public disabledBtn:布尔值；public allExercises: any[] = [];//初始化一个包含所有练习的 VAR公开日期:any = moment().format('L');构造函数(公共导航控件:导航控制器，私人流媒体:流媒体，公共参数:导航参数，公共模态控件:模态控制器){//在页面构建中获取所有练习和图像路径this.allExercises.push({练习:params.get("clickedExercise"),路径:'assets/img/' + params.get("clickedExercise") + '.jpg',完成:假});this.allExercises.push({练习:params.get("secondExercise"),路径:'assets/img/' + params.get("secondExercise") + '.jpg',完成:假});this.allExercises.push({练习: params.get("thirdExercise"),路径:'assets/img/' + params.get("thirdExercise") + '.jpg',完成:空});this.allExercises.push({练习: params.get("fourthExercise"),路径:'assets/img/' + params.get("fourthExercise") + '.jpg',完成:空});this.disabledBtn = false;}ionViewDidEnter() {//阻止滑动以更改页面this.slides.lockSwipes(true);}nextExercise(i, id, done) {this.slides.lockSwipes(false);this.slides.slideNext();this.slides.lockSwipes(true);//此处将打开的幻灯片的完成值设置为true，但会被构造函数覆盖.this.allExercises[i].done = true;console.log(this.allExercises[i].done);如果(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"));}让 modal = this.modalCtrl.create(ModalPage);modal.present();如果(我== 3){console.log("lastOne");this.navCtrl.push(HomePage);localForage.setItem('didAllExercises', [true, this.date]);}}}如何将 this.allExercises[i].done 的值设置为 true 并创建一个 *ngIf 来检查练习是否完成以及何时完成比不再显示幻灯片?
allExercises.done 将始终首先输入为 false，因为我在构造函数中设置它在发出 nextExercise() 后更改，但是我如何更改 popertyallExercises.done 在数组中为真并保持真?因此，如果它完成了，它必须跳过那张幻灯片并转到下一张未完成的幻灯片.
所以你可以这样做:
您需要更新数据库，以便每个练习都有一个 done 字段.
我不知道你有多少练习，但只选择了4个done: false.
拥有您的用户可以随时查看的离线数据真的很好，但是由于这是一个获取视频的应用程序，我认为没有必要为此保留 localForage/localStorage，只有当您有一个页面时用户才能看到可以看到他做了什么练习.
不要保存数组，不好，很丑，不太适合你操作.使用对象
所以在你的 nextExercise 上你可以这样做
nextExercise(i, id, done) {//将此用户的练习保存在您的数据库中，您有练习 ID//让您更容易跟踪.//如果用户删除应用程序并重新安装，您可以下载他的进度saveYourExerciseMethod().then(() =>{this.slides.lockSwipes(false);this.slides.slideNext();this.slides.lockSwipes(true);//我不知道 LOCALFORAGE 是如何工作的，但如果你有一个静态的 'exercise1IsDone'//他们总是会忽略那个练习，你永远不会完成另一个//锻炼//您需要在完成所有练习后保存一个对象或//以动态方式设置名称localForage.setItem(this.allExercises[i].exercise, {exercise: this.allExercises[i].exercise, done: true]);//不知道这是做什么的，所以我不会改变它让 modal = this.modalCtrl.create(ModalPage);modal.present();如果(我== 3){this.navCtrl.push(HomePage);localForage.setItem('didAllExercises', {completed: true, date: this.date});}});}据我了解您的代码和应用程序，这就是我可以为您提供的建议.无法发布更多代码，因为这是我所看到的.
希望对你有帮助
Here I have the outcome of the JSONOBJ:
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
});
}
and these are 2 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>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>
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>
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]);
}
}
}
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?
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.
I don't know how much exercises do you have, but select only 4 where done: false.
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
So on your nextExercise you can do this
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.
Hope this helps you
这篇关于运动完成后，Ionic 2 不显示幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
