基于 if 语句的动态启用/禁用按钮 Ionic答案

【问题标题】：Dynamically enabling/disabling button based from if statement Ionic基于 if 语句的动态启用/禁用按钮 Ionic
【发布时间】：2018-02-15 16:44:45
【问题描述】：

我想根据我的 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,
    }];

  }

【问题讨论】：

会不会是因为你在 if 语句中使用了小写的passed？
@MaartenBicknese 谢谢，伙计！没有注意到大声笑。我太傻了哈哈哈

标签： javascript typescript if-statement ionic-framework

【解决方案1】：

尝试以下方法之一：

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

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

在通过 subscribe 方法更新数据后，使用其中一种方法来更新视图以进行新的更改。

【讨论】：