2017-09-07 14 views
1

if if文に基づいてボタンを無効にしたい。私はfirebaseからデータを取得し、それに基づいてボタンを有効/無効にします。ifステートメントからボタンを動的に有効/無効にするIonic

私の最初のクイズでは、次のレッスンなどを可能にします。ユーザーがクイズに合格しなかった場合、ボタンは無効になります。私の活字体で

:私の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> 

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. 

問題:それはfirebaseで私のデータが真であってもfalseを返します。声明場合、それは最初に実行されないようです:

else { 

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

    } 
+0

if文で小文字の 'passed'を使用している可能性がありますか? –

+0

@MaartenBickneseありがとう、メイト!そのことに気付かなかった。私の愚かなので、hahaha – AngularNewbie

答えて

0

は、これらのいずれかを試してみてください。

ApplicationRef.tick() - アンギュラ1の$ rootScopeに似$ダイジェスト() - 。唯一このコンポーネントとその子

0123をチェックし、 すなわち - $スコープに似$ダイジェスト() - 。すなわち、完全なコンポーネントツリーに

ChangeDetectorRef.detectChangesを()をチェック

subscribeメソッドからデータを更新したら、これらのいずれかを使用して新しい変更でビューを更新します。

関連する問題