根据if语句动态启用/禁用按钮Ionic

Question

我想基于if语句禁用按钮。我从Firebase获取数据，并从中启用/禁用该按钮。

假设我在第一次测验中通过它，我将启用下一课，等等。如果用户未通过测验，则该按钮被禁用。

在我的打字稿：

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, 
    }]; 

    } 
}); 
//It will be same here for lessonstatus 2 to 4. 

在我的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> 

的问题：它返回false，即使我在火力点的数据是真实的。它似乎不执行第一个if语句：

else { 

    this.lessonUnlocked = [{ 
     name: "lock", 
     valid: false, 
    }]; 

    } 

Answer 1

尝试其中之一：

ApplicationRef.tick（） - 类似角1的$ rootScope $摘要（） - 即，检查全组件树

ChangeDetectorRef.detectChanges（） - 类似$范围$摘要（） - 即只检查该组件及其子

当您从订阅方法获取更新数据后，使用其中的一个更新新的更改视图。