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>

问题：即使firebase中的数据为true，它也会返回false。它似乎没有执行第一个if语句：

 else {

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

  }

Answer 1

尝试以下方法之一：

ApplicationRef.tick（） - 类似于Angular 1的$ rootScope。$ digest（） -   即，检查完整的组件树

ChangeDetectorRef.detectChanges（） - 类似于$ scope。$ digest（） -   即，仅检查此组件及其子组件

在您从subscribe方法更新数据后，使用其中一个更新视图并进行新的更改。

根据if语句Ionic

1 个答案: