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

Question

在我的 Angular quiz app 中，我的两个问题组件（MultipleAnswerComponent）都有相同的逻辑：option.selected && option.correct 和 option.selected && !option.correct > 和 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 的正确值，并将这些值传递回组件。然而现在所有的选项在点击一个选项时显示为绿色/红色；我只需要 selected 选项 来获得背景颜色。不确定 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;
}

Answer 1

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

当您在测验中选择一个项目并调用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"

（或为此创建一个函数）

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

Answer 2

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

把你的代码改成这样就可以了：

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

Answer 3

如果您只需要突出显示选定的选项，则无需将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。

Answer 4

检查下面要更正的代码行

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">