点击功能上每个元素的角度类绑定

Question

我正在为一个学校项目做一个测验应用程序。在学习部分，当我点击每个可能的答案时，我希望它具有功能，如果它是错误答案，它应该将颜色变为红色，当它正确答案时变为绿色。它应该太亮了。我挣扎了这么多小时，我瘦了，我有点迷路了。

这是我的组件 html：

    <div class="container p-5 ">
      <div class="row">
        <div class = "col-sm-8 offset-2">
          <p class = "text-center">{{currentQuestion + 1 }} of {{questions.length}} </p>
          <h3>{{questions[currentQuestion].question}}</h3>
          <div  *ngFor="let question of questions[currentQuestion].answers">
            <!-- <label   class="form-check-label" for="answersRadio">
                <input (change) = "toggleCheck($event)" class="form-check-input" type="checkbox" name="answerSelected" ([ngModel])="question.correct" >
              {{ question.option }} {{question.correct}}
              <span id="text" style="display: none;">{{answerCheckText}} </span>
            </label> -->
            <ul>
              <li (click) = "answerSelected=!answerSelected" [ngClass] = "answerSelected ? 'correct' : 'incorrect'"> {{question.option}}</li>
            </ul>
          </div>
          <!-- <button class="btn btn-info btn-block" (click)="showResult()">Show Result</button>
          <div *ngIf="result">
            Correct Answers: {{correctAnswers}} |  Incorrect Answers {{incorrectAnswers}}
          </div> -->
          <button [ngClass]="buttonText" class="btn btn-info btn-block"  (click)="showAnswer(); toggleShow()">{{buttonText}}</button>
            <div *ngIf="show">
            <div >{{correctOption}} </div>
            <span>{{description}}</span>
          </div>
          <button class="btn btn-danger btn-block" (click)="previousQuestion()">Previous</button>
          <button class="btn btn-success btn-block" (click)="nextQuestion()">Next</button>
        </div>
    </div>
    
    </div>

这是我的组件 ts 文件：

    import { Component, OnInit } from '@angular/core';
    import { QuestionsService } from '../shared/questions.service';
    import {Question} from '../shared/question';
    
    @Component({
      selector: 'app-question-learn',
      templateUrl: './question-learn.component.html',
      styleUrls: ['./question-learn.component.css']
    })
    export class QuestionLearnComponent implements OnInit {
    questions: Question[] = [];
    
    currentQuestion = 0;
    answerSelected = false;
    correctAnswers = 0;
    incorrectAnswers = 0;
    
    buttonText = "Show Hint";
    
    show = false;
    
    correctOption = '';
    
    description = '';
    
    answerCheckText = '';
    
    result = false;
    
    constructor(private questionService: QuestionsService) { }
    
      ngOnInit(): void {
        this.questions = this.questionService.getQuestions();
    
      }
    
    // toggleCheck(event: any) {
    //   let check = event.target.checked;
    //   if (check) {
    //     let question = this.questions[this.currentQuestion];
    //     for (let answer of question.answers) {
    //         if (answer.correct === true ) {
    //           console.log("correct");
    //         } else {
    //           console.log("incorrect");
    //        }
    //        break;
    //     }
    //   }
    }
    
      // onAnswer () {
      //   this.answerSelected = true;
    
      // }
    
      check(status: any) {
        if(status.correct){
          return 'correct';
        } else{
          return  'incorrect;'
        }
      }
    
      showResult() {
        this.result = true;
      }
    
      toggleShow() {
    
        this.show = !this.show;
    
        if(this.show === false) {
          this.buttonText = 'Show Answer';
        } else {
          this.buttonText = 'Hide Answer';
        }
      }
    
      showAnswer() {
        let question = this.questions[this.currentQuestion];
        for (let answer of question.answers) {
          if (answer.correct === true ) {
            this.correctOption = answer.option;
            this.description = question.description;
          }
        }
      }
    
      nextQuestion() {
        if(this.currentQuestion >= this.questions.length - 1 ) {
          console.log("exceeded the maximum number");
        } else {
          this.currentQuestion++;
          this.show = false;
          if(this.show === false) {
            this.buttonText = 'Show Answer';
          } else {
            this.buttonText = 'Hide Answer';
          }
    
        }
      }
    
      previousQuestion() {
        if(this.currentQuestion <= 0 ) {
          console.log("exceeded the maximum number");
        } else {
          this.currentQuestion--;
          this.show = false;
          if(this.show === false) {
            this.buttonText = 'Show Answer';
          } else {
            this.buttonText = 'Hide Answer';
          }
        }
      }
    
    }

这是我的问题界面：

export interface Question {
  id: number,
  question: string,
  answers: {option: string, correct:boolean}[],
  description: string
}

这是一个更好的可视化图像： image

Answer 1

所以我仍然在挣扎，但我认为我已经向前迈出了一步。 类是绑定的，但我不知道如何使此功能正常工作，单击时我只得到绿色的所有答案。我想问题在于将这些 question.correct 属性绑定到我的函数，以便它正常工作。

我添加了新变量：

colorClass = 'normal';

有我的功能：

onAnswer() {
    let question = this.questions[this.currentQuestion];
    for (let answer of question.answers) {
        if (answer.correct === true  ) {
          this.colorClass = 'correct';
        } else {
          this.colorClass = 'incorrect';
       }
    }
}

html：

  <h3>{{questions[currentQuestion].question}}</h3>
      <div  *ngFor="let question of questions[currentQuestion].answers">
        <ul>
          <li [className] ="colorClass"   (click) = "onAnswer()">{{question.option}}</li>
        </ul>
      </div>

我的 CSS 类

ul {
  display: flex;
  width: 80%;
  margin: 0;
  padding: 0;
  flex-flow: column;
}

ul li.normal {
  list-style: none;
  line-height: 2;
  border: 1px solid #cdd2d2;
  margin-bottom: 10px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
}

li.normal:hover {
  background-color: whitesmoke;
}

li.correct {
  list-style: none;
  line-height: 2;
  border: 1px solid #cdd2d2;
  margin-bottom: 10px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  border: 1px solid green;
  background-color: green;
  color: white;
  font-weight: 600;
}

li.incorrect {
  list-style: none;
  line-height: 2;
  border: 1px solid #cdd2d2;
  margin-bottom: 10px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  border: 1px solid red;
  background-color: red;
  color: white;
  font-weight: 600;
}