javascript - 基于 if 语句动态启用/禁用按钮 Ionic

Question

我想根据我的 if 语句禁用按钮。我从 firebase 获取数据，并根据该数据启用/禁用该按钮。

假设我在第一个测验中通过了，我将启用下一课，依此类推。如果用户没有通过测验，该按钮将被禁用。

在我的 typescript 上:

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>

问题:即使我在 firebase 中的数据是 true，它也会返回 false。好像没有执行第一个if语句:

 else {

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

  }

Answer 1

尝试以下其中一项:

ApplicationRef.tick() - similar to Angular 1's $rootScope.$digest() -- i.e., check the full component tree

ChangeDetectorRef.detectChanges() - similar to $scope.$digest() -- i.e., check only this component and its children

通过订阅方法更新数据后，使用其中一种方法来更新 View 以进行新的更改。