如何根据角度的正确或错误答案动态添加ngclass？答案

【问题标题】：How to add ngclass dynamically on the basis of correct or wrong answer in angular?如何根据角度的正确或错误答案动态添加ngclass？
【发布时间】：2021-01-10 18:22:06
【问题描述】：

export class QuestionsPage implements OnInit {
  question = [];
  isAnswerd: boolean = false;
  wrong: boolean = false;
  qIndex: number = 0;
  indicatorlength = [];
  score: number = 0;
  min: number = 0;
  sec: any = 0;
  constructor(private service: AppServiceService) {}

  ngOnInit() {
    this.question = this.service.question;
    this.renderIndicator();
    this.timeCount();
  }

  checkQuestion(ans) {
    console.log(ans.target.id);
    document.getElementById(ans.target.id).style.color = "white";
    document.getElementById(ans.target.id).style.backgroundColor = "red";
    const correctOption = this.question[this.qIndex].answer;
    if (ans == correctOption) {
      this.score++;
      this.isAnswerd = true;
      this.renderIndicator("correct", this.qIndex);
    } else {
      this.isAnswerd = true;
    }
  }

  nextQuestion() {
    document.getElementById("A").style.color = "black";
    document.getElementById("A").style.backgroundColor = "#cccccc";
    document.getElementById("B").style.color = "black";
    document.getElementById("B").style.backgroundColor = "#cccccc";
    document.getElementById("C").style.color = "black";
    document.getElementById("C").style.backgroundColor = "#cccccc";
    document.getElementById("D").style.color = "black";
    document.getElementById("D").style.backgroundColor = "#cccccc";
    this.isAnswerd = false;
    if (this.qIndex < this.question.length - 1) {
      this.qIndex++;
    } else {
    }
  }

  renderIndicator(ansType?: string, qIndex?: number) {
    const totalQuestions = this.question.length;
    for (let i = 0; i < totalQuestions; i++) {
      if (i < 9) {
        const a = i + 1;
        const num = "0" + a;
        this.indicatorlength.push(num);
      } else {
        this.indicatorlength.push(i + 1);
      }
      if (ansType == "correct") {
      } else {
      }
    }
  }

}

我想在答案正确时改变颜色，使用 bg-primary 类，否则使用 bg-danger。用户单击答案时如何管理背景颜色？ Angular 中的 NgClass 指令将类名动态分配给特定的索引值。我想在答案正确时改变颜色，使用 bg-primary 类，否则使用 bg-danger。用户单击答案时如何管理背景颜色？ Angular 中的 NgClass 指令将类名动态分配给特定的索引值

【问题讨论】：

标签： javascript angular ionic-framework

【解决方案1】：

动态部分会更容易和更简单使用类似 -> Render2 lib

之后，您可以在所选事件中轻松add the your special class dynamically

import { Renderer2 } from '@angular/core';
constructor(private render:Renderer2) { }
处理您的selected event 或像这样回答点击

HandleCorrectAnswer(event:any) { 
     //this.renderer.addClass(event.target,"some selected answer NgClass here");

     this.renderer.addClass(event.target,"bg-primary");
     
     //... do something more
   }

在html中：

<button class="yourDefaultClasses" (click)="HandleCorrectAnswer()">User Selected Answer</button>

【讨论】：