根據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（） - 類似$範圍$摘要（） - 即只檢查該組件及其子

當您從訂閱方法獲取更新數據後，使用其中的一個更新新的更改視圖。