Angular 5单选按钮绑定异常：MCQ答题正确计数功能失效

我来帮你排查这个单选按钮绑定的坑，看你提供的代码片段，主要是在单选组隔离、ngModel绑定逻辑和数据遍历上出了问题，咱们一步步来修复：

先梳理你代码里的核心问题 #

• 所有单选框共用同一个name="s"和[(ngModel)]="hello"：这会导致多个题目互相干扰，选第二题的选项会直接覆盖第一题的选择，根本没法单独存储每个题目的答案
• 遍历逻辑混乱：用*ngFor遍历题目数组时，你用abc.OP[j]和abc.OP[j+1]来取题目和选项，这把题目数组的索引和选项数组的索引混在一起了，每个题目应该是独立包含题目文本和选项集合的对象
• 缺少提交后判断正确答案并递增计数器的逻辑

完整修复方案 #

第一步：修正组件内的数据结构 #

先把题目数组改成每个元素包含题目文本、选项列表和正确答案的结构，同时准备存储用户答案的对象和计数器：

// 组件.ts文件里的代码
import { Component } from '@angular/core';

@Component({
  selector: 'app-mcq-quiz',
  templateUrl: './mcq-quiz.component.html',
  styleUrls: ['./mcq-quiz.component.css']
})
export class McqQuizComponent {
  // 题目数组示例，每个元素对应一道单选题
  questArrayNew1 = [
    {
      questionText: "以下哪种是Angular的内置指令？",
      options: ["Vue-for", "*ngFor", "React-map", "jQuery-each"],
      correctAnswer: "*ngFor"
    },
    {
      questionText: "双向绑定的语法是？",
      options: ["{{}}", "[()]", "[]", "()"],
      correctAnswer: "[()]"
    }
  ];

  // 存储每个题目的用户答案，键是题目索引，值是选中的选项
  userAnswers: { [key: number]: string } = {};
  // 答对计数器
  correctCount = 0;

  // 提交答案时的校验逻辑
  checkAnswers() {
    this.correctCount = 0; // 先重置计数器
    this.questArrayNew1.forEach((question, index) => {
      // 判断当前题目用户选择是否等于正确答案
      if (this.userAnswers[index] === question.correctAnswer) {
        this.correctCount++;
      }
    });
  }
}

第二步：修复HTML模板的绑定逻辑 #

给每个题目生成独立的单选组，绑定到对应题目的用户答案：

<!-- 组件.html文件里的代码 -->
<div *ngFor="let question of questArrayNew1; let qIndex = index" class="question-item">
  <!-- 显示题目序号和文本 -->
  {{ qIndex + 1 }}. {{ question.questionText }}
  <!-- 遍历当前题目的所有选项 -->
  <div *ngFor="let option of question.options; let oIndex = index" class="option-item">
    <input 
      type="radio" 
      [name]="'question-group-' + qIndex"  <!-- 每个题目用唯一的name，避免组冲突 -->
      [(ngModel)]="userAnswers[qIndex]"   <!-- 绑定到当前题目的用户答案变量 -->
      [value]="option"                    <!-- 选项值就是选项本身的文本 -->
    >
    {{ option }}
  </div>
  <hr>
</div>

<!-- 提交按钮和计数器显示 -->
<button (click)="checkAnswers()" class="submit-btn">提交答案</button>
<p class="result">答对数量：{{ correctCount }}</p>

第三步：别忘了导入FormsModule #

因为用到了[(ngModel)]双向绑定，必须在对应的模块里导入FormsModule，否则绑定会失效：

// 在你的app.module.ts或者对应feature module里
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入这个模块

import { McqQuizComponent } from './mcq-quiz/mcq-quiz.component';

@NgModule({
  declarations: [McqQuizComponent],
  imports: [BrowserModule, FormsModule], // 加到imports数组里
  bootstrap: [McqQuizComponent]
})
export class AppModule { }

为什么这样能解决问题？ #

1. 每个题目用'question-group-' + qIndex作为单选框的name，保证每个题目是独立的单选组，不会互相干扰
2. 用userAnswers[qIndex]来存储每个题目的用户选择，避免了单个变量被覆盖的问题
3. 遍历逻辑清晰，每个题目下的选项单独遍历，不会出现索引混乱的情况
4. 提交时遍历所有题目，对比用户答案和正确答案，正确就递增计数器

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