Angular模板驱动表单搭配ngModel使用时，循环渲染单选框出现同时选中异常

异常根因 #

这个问题的触发逻辑非常明确：

1. 原生HTML的单选框靠相同的name值实现同组互斥，但在Angular模板驱动表单中，只要给每个单选框单独绑定独立的ngModel实例，Angular就会把每个单选框识别为完全独立的表单控件，直接覆盖原生的互斥逻辑——哪怕同组的name值完全一致，也不会触发同组选项互斥的效果，最终就会出现同组能同时选中多个选项的问题。
2. 原代码里写的#{{i}}属于非法语法：Angular的模板引用变量是编译期解析的，不支持用插值语法动态生成变量名，这会进一步导致Angular对控件的分组识别失效，放大多选的异常表现。

具体修正方案 #

• 同组的所有单选框必须绑定同一个ngModel实例，不能每个单选框单独绑定独立的ngModel值。
• 删除非法的动态模板引用变量写法，选中值直接通过组件侧的数据字段读取即可，不需要依赖模板引用变量获取控件状态。
• 优化name属性的绑定方式，给name加上固定前缀，避免和页面其他表单控件的name值重复导致串组。

修正后的模板代码：

<div class="con" *ngFor="let Qtn of Q; let i = index">
  <p class="question">{{ Qtn.q }}</p>
  <div class="container" *ngFor="let op of Qtn.op">
    <label>
      <input
        type="radio"
        [name]="'question_' + i"
        [value]="op.answer"
        [(ngModel)]="Qtn.selectedAnswer"
      />
      {{ op.op }}
    </label>
  </div>
  <p #result></p>
  <hr />
</div>

配套说明 #

不需要手动在Q数组的每道题对象里提前初始化selectedAnswer字段，Angular在首次完成ngModel绑定时，会自动给对应字段赋初始空值。后续你可以直接通过Qtn.selectedAnswer读取当前题目的选中结果，逻辑完全通顺。

关键注意点：同组radio如果绑定了互相独立的ngModel实例，是Angular表单逻辑下的必现多选bug，和其他代码逻辑无关，只要把同组radio的ngModel绑定指向同一个数据字段，互斥效果会自动生效。

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