title: Dynamically enabling/disabling button based from if statement Ionic
body: <p>I want to disable buttons based on my if statement. I get the data from firebase and based from that I will enable/disable the button. </p>
  
  <p>Let say that on my First Quiz I pass it, I will enable the next lesson and so on. If the user did not pass the quiz the button is disabled.</p>
  
  <p>On my Typescript:</p>
  
  <pre><code>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 =&gt; {
    snapshots.forEach(snapshot =&gt; {
      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.
  </code></pre>
  
  <p>On my HTML</p>
  
  <pre><code>&lt;ion-list *ngFor="let x of lessonUnlocked"&gt;
  
  &lt;ion-item *ngIf = "x.valid == true"&gt;
  &lt;button [disabled]="x.valid" ion-item (click)="Lesson1()"&gt;
  &lt;ion-icon name="{{x.name}}"&gt;&lt;/ion-icon&gt; Lesson1
  &lt;/button&gt;
  &lt;/ion-item&gt;
  
   &lt;ion-item *ngIf = "x.valid == true"&gt;
  &lt;button  [disabled]="x.valid" ion-item (click)="Lesson2()"&gt;
  &lt;ion-icon name="{{x.name}}"&gt;&lt;/ion-icon&gt; Lesson2
  &lt;/button&gt;
  &lt;/ion-item&gt;
  
  &lt;ion-item *ngIf = "x.valid == true"&gt;
  &lt;button ion-item (click)="Lesson3()"&gt;
  &lt;ion-icon name="lock"&gt;&lt;/ion-icon&gt; Lesson3
  &lt;/button&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p></p>
  
  <p>The problem: it returns false even though my data in firebase is true. It seems that it does not execute the first if Statement: </p>
  
  <pre><code> else {
  
      this.lessonUnlocked = [{
        name: "lock",
        valid: false,
      }];
  
    }
  </code></pre>