如何仅在测验中的选定选项上显示背景色

如何解决如何仅在测验中的选定选项上显示背景色

在我的 Angular quiz app 中，我有相同的逻辑：我的两个问题组件中的option.selected && option.correct和option.selected && !option.correct（ MultipleAnswerComponent 和 SingleAnswerComponent ）模板，因此我移出逻辑并将两个变量添加到 QuizService 中以共享/减少重复的代码：

setOptions(optionSelected: boolean,optionCorrect: boolean): void {
  this.isCorrectOption = optionSelected && optionCorrect;
  this.isIncorrectOption = optionSelected && !optionCorrect;
}

我还用类绑定中的变量替换了逻辑，如下所示：[class.is-correct]="isCorrectOption"和[class.is-incorrect]="isIncorrectOption"，但是所有选项的颜色都变红了，所以我改变了背景色mat-checkbox / mat-radio-button $ light-gray！important现在是灰色。当我单击一个选项时，绿色或红色背景没有按预期出现。

编辑：我在QuizService中为 isCorrectOption 和 isIncorrectOption 获取了正确的值，并将这些值传递回了组件。但是，当单击一个选项时，这些选项的 ALL 现在显示为绿色/红色。我只需要 选定的选项 即可具有背景色。不知道 isCorrectOption 和 isIncorrectOption 是否正确绑定到类绑定，或者我使用的逻辑是否不正确...

我尝试按照以下答案中的建议进行操作，但出现错误：无法读取未定义的“选定”。我当前的解决方案非常接近解决这个问题，但是我仍然需要一些其他帮助来使各个突出显示正常工作。请您看到我的StackBlitz并帮助我解决此问题。谢谢。

MultipleAnswerComponent / SingleAnswerComponent 模板中的

：

<div class="options" *ngFor="let option of currentQuestion.options; index as i">
  <div *ngIf="multipleAnswer" or *ngIf="!multipleAnswer">
    <mat-checkbox or <mat-radio-button
      (change)="setSelected(i)"
      [class.is-correct]="isCorrectOption"
      [class.is-incorrect]="isIncorrectOption">

在MultipleAnswer / SingleAnswer TypeScript文件中：

setSelected(optionIndex: number): void {
  this.quizStarted = true;
  this.isCorrectAnswerSelected = this.isCorrect(this.currentQuestion.options[optionIndex].correct,optionIndex);
  this.answer.emit(optionIndex);

  if (this.correctAnswers.length === 1) {
    this.currentQuestion.options.forEach((option: Option) => option.selected = false);
  }
  this.currentQuestion.options[optionIndex].selected = true;

  if (
    optionIndex >= 0 &&
    this.currentQuestion &&
    this.currentQuestion.options &&
    this.currentQuestion.options[optionIndex]["correct"]
  ) {
    optionIndex = null;
    this.optionCorrect = true;
    this.timerService.stopTimer();
    this.quizService.correctSound.play();   
  } else {
    this.optionCorrect = false;
    this.quizService.incorrectSound.play();
  }

  this.quizService.setOptions(true,this.optionCorrect);
  this.isCorrectOption = this.quizService.isCorrectOption;
  this.isIncorrectOption = this.quizService.isIncorrectOption;
  this.alreadyAnswered = true;
}

解决方法

您的问题是当您将所选状态保存到测验服务中时。

当您在测验中选择一项并调用setOptions(optionSelected: boolean,optionCorrect: boolean)时，optionSelected的值为true（因为当前项）。问题在于测验服务isCorrectOption和isIncorrectOption的值使用optionSelected的相同实例，因此对于所有项目都是如此。

该怎么办？ 好吧，不要为此使用测验服务，而应在每个Option实例中使用保存的选定状态。

您已经在打字稿中做了

this.optionSelected = this.currentQuestion.options[optionIndex];
this.optionSelected.selected = true;
this.optionSelected.correct = false;

因此在html中使用这些值：

[class.is-correct]="option.selected && option.correct"

（或为此创建一个函数）

当然，您可以将其重构为使用可解决该问题的测验服务。

,

isCorrectOption和isIncorrectOption都是（非空）字符串，因此评估为真实。

将代码更改为此，就可以了：

isCorrectOption = option.selected && option.correct;
isIncorrectOption = option.selected && !option.correct;

,

如果只需要突出显示选定的选项，则无需将is-correct和is-incorrect类应用于单选按钮。

相反，您可以添加新类selected并按如下方式使用它：

<mat-checkbox (change)="setSelected(i)" [class.selected]="option.selected">
  ...
</mat-checkbox>

和

<mat-radio-button (change)="setSelected(i)" [class.selected]="option.selected">
  ...
</mat-radio-button>

将.selected类添加到相应的CSS文件中：

.selected {
  background: lightblue;
}

看看更新后的stackblitz。

,

检查下面要更正的代码行

multiple-answer.component.html

来自：

<mat-checkbox (change)="setSelected(i)" [class]="option.className">

收件人：

<mat-checkbox (change)="setSelected(i)" [class.is-correct]="option.selected && option.correct" [class.is-incorrect]="option.selected && !option.correct">