I am looking to dynamically enable or disable buttons based on specific conditions. The data is retrieved from Firebase, and depending on the data, I will either enable or disable the button.
For example, if a user passes the First Quiz, I want to enable the next lesson's button and so forth. If the user does not pass the quiz, the button should remain disabled.
In my Typescript file:
this.currentUser = this.afAuth.auth.currentUser.uid;
this.lessonStatus = this.af.object("/Quiz/" + this.currentUser + "/First_Quiz", { preserveSnapshot: true });
this.lessonStatus2 = this.af.object("/Quiz/" + this.currentUser + "/Sec_Quiz", { preserveSnapshot: true });
this.lessonStatus3 = this.af.object("/Quiz/" + this.currentUser + "/Third_Quiz", { preserveSnapshot: true });
this.lessonStatus4 = this.af.object("/Quiz/" + this.currentUser + "/Fourth_Quiz", { preserveSnapshot: true });
this.lessonStatus.subscribe(snapshots => {
snapshots.forEach(snapshot => {
console.log(snapshot.key);
console.log(snapshot.val());
this.arrayTest.push(snapshot.val());
});
//Outputs "true"
console.log(this.arrayTest[0].Passed)
if (this.arrayTest[0].passed == true) {
this.lessonUnlocked = [{
name: "unlock",
valid: true,
}];
}
else {
this.lessonUnlocked = [{
name: "lock",
valid: false,
}];
}
});
//The same logic applies for lessonstatus 2 to 4.
In my HTML:
<ion-list *ngFor="let x of lessonUnlocked">
<ion-item *ngIf = "x.valid == true">
<button [disabled]="!x.valid" ion-item (click)="Lesson1()">
<ion-icon name="{{x.name}}"></ion-icon> Lesson1
</button>
</ion-item>
<ion-item *ngIf = "x.valid == true">
<button [disabled]="!x.valid" ion-item (click)="Lesson2()">
<ion-icon name="{{x.name}}"></ion-icon> Lesson2
</button>
</ion-item>
<ion-item *ngIf = "x.valid == true">
<button ion-item (click)="Lesson3()">
<ion-icon name="lock"></ion-icon> Lesson3
</button>
</ion-item>
The issue at hand is that even though the data in Firebase is set to true, the button remains disabled. It appears that the first if statement mentioned below is not being executed:
else {
this.lessonUnlocked = [{
name: "lock",
valid: false,
}];
}