Angular CSS样式没有改变答案

【问题标题】：Angular css style is not changingAngular CSS样式没有改变
【发布时间】：2019-03-06 22:59:40
【问题描述】：

我有：

  <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，但颜色没有改变...

【问题讨论】：

试试[class.bgred]="correctAnswerFirst" 。如果这不起作用，请提供您的完整模板、scss 和控制器
如果控制器上没有encapsulation: ViewEncapsulation.None,，page-quizpageloop 也将不起作用并且不需要
如果 page-quizpageloop 是您的组件选择器 (<page-quizpageloop></page-quizpageloop>)，您应该删除它并只留下 .bgred {...}。如果您必须拥有它，请在您的 CSS/SCSS 中使用 :host 选择器访问它
@Stefan 不，它不起作用。我在问题中添加了完整的代码。
@farahm 我已经删除了我的答案，我的方法已被弃用。也许这是灵魂的帮助，blog.angular-university.io/angular-host-context

标签： css angular ionic-framework

【解决方案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

【讨论】：

好吧，在构造函数中我做了this.correctAnswerFirst = false; 我没有在代码中提到这一点，因为我想在问题中保持代码简短
我已经调试了应用程序，我来点this.correctAnswerFirst = true;变量设置为true，但颜色没有改变......