Angular测验应用点击答案切换对错对应颜色的类绑定实现问题

你现有代码的核心问题是所有答案选项共用全局的answerSelected状态，导致点击一个选项所有选项同步变更样式，且没有和每个选项自身的correct对错属性关联，按以下步骤修改即可实现需求：

第一步：修改组件TS代码 #

新增控制答案展示状态的变量和方法，修复原有方法笔误：

// 新增变量，控制是否展示答案对错状态
isAnswerRevealed = false;

// 切换答案展示状态的方法
toggleAnswerStatus() {
  this.isAnswerRevealed = !this.isAnswerRevealed;
}

// 修复原有check方法的笔误（删除incorrect后多余的分号）
check(status: any) {
  if(status.correct){
    return 'correct';
  } else{
    return  'incorrect';
  }
}

第二步：修改组件HTML代码 #

调整选项的点击事件和样式绑定逻辑，关联每个选项自身的对错属性：

<!-- 把原有的ngFor遍历答案部分替换为以下代码 -->
<div  *ngFor="let answer of questions[currentQuestion].answers">
  <ul>
    <li (click)="toggleAnswerStatus()" [ngClass]="isAnswerRevealed ? check(answer) : ''"> {{answer.option}}</li>
  </ul>
</div>

第三步：新增对应CSS样式 #

在组件的css文件中加入样式定义：

.correct {
  color: green;
  font-weight: bold;
}
.incorrect {
  color: red;
  font-weight: bold;
}
li {
  cursor: pointer;
  padding: 8px;
  margin: 4px 0;
  list-style: none;
  border: 1px solid #eee;
  border-radius: 4px;
}

修改完成后点击任意选项即可触发所有答案的对错状态展示，正确选项显示绿色、错误选项显示红色，再次点击任意选项即可隐藏状态回到默认样式，支持反复切换。

内容的提问来源于stack exchange，提问作者Bartheus