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

Question

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

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

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

编辑： 我在 QuizService 和值被传递回组件。但是现在 ALL 的选项在单击选项时显示 green/red；我只需要 选定的选项 来设置背景颜色。不确定 isCorrectOption 和 isIncorrectOption 是否正确绑定到 class 绑定或者我使用的逻辑是否不正确.. .

我尝试按照下面答案中的建议进行操作，但出现错误：无法读取未定义的 'selected'。我当前的解决方案非常接近于弄清楚，但我仍然需要一些额外的帮助才能使个人突出显示正常工作。请你看看我的 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

isCorrectOption 和 isIncorrectOption 都是（非空）字符串，因此计算结果为真。

将您的代码更改为此，您应该没问题：

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

Answer 2

如果您只需要突出显示所选选项，则不需要将 is-correct 和 is-incorrect classes 应用于单选按钮。

相反，您可以添加新的 class 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 class 添加到相应的 css 文件：

.selected {
  background: lightblue;
}

查看更新后的 stackblitz。

Answer 3

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

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

怎么办？好吧，与其使用测验服务，不如在每个选项实例中使用保存的 selected 状态。

在打字稿中你已经这样做了：

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

因此在 html 中使用这些值：

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

（或为此创建一个函数）

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

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

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

how to display background-color only on selected option in quiz

css

logic

css-selectors

ng-class

angular