css - Angular CSS样式没有改变

Question

我有：

  <ion-item [ngClass]="{'bgred': correctAnswerFirst}">
  </ion-item>

和：

page-quizpageloop {
    .bgred{
        background-color: red;
    }
}

在打字稿中，我设置了布尔值：

if(this.correctAnswer==1){
      this.correctAnswerFirst = true;
}

但是当布尔值设置为时，背景颜色不会改变true

完整代码：

HTML：

<ion-header>

  <ion-navbar hideBackButton="true">
    <ion-title>Quiz</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <h4 id="page2-heading1" style="color:#000000;">
    Question {{currentQuestionNumber}}: {{questionStr}}
  </h4>

  <form [formGroup]="myForm">
    <ion-list radio-group [(ngModel)]="answers" formControlName="listOptions">

      <ion-item [class.bgred]="correctAnswerFirst">
        <ion-radio value="answer1" (ionSelect)="processSelectedAnswer(1)"></ion-radio>
        <ion-label>{{answer1}}</ion-label>
      </ion-item>

    </ion-list>
  </form>

</ion-content>

控制器：

@IonicPage()
@Component({
  selector: 'page-quizpageloop',
  templateUrl: 'quizpageloop.html'
})

export class QuizPageLoop {

  correctAnswerFirst: boolean;

  showNextQuestion() {
     if(this.correctAnswer==1){
        this.correctAnswerFirst = true;
     }
     this.wait(3000);
  }

完整的scss是：

page-quizpageloop {
    .bgred{
        background-color: red;
    }
}

我已经调试了应用程序，我this.correctAnswerFirst = true;发现变量设置为true，但颜色没有改变......

标签： cssangularionic-framework

Answer 1

在这个

if(this.correctAnswer==1){
  this.correctAnswerFirst = true;

}

this.correctAnswer is undefined and so if condition fails and this.correctAnswerFirst is not set to true