Angular中*ngFor内单选框绑定失效：无法更新question.pass值

我来帮你排查下问题所在，你的代码里有两个关键问题导致pass属性一直是undefined：

1. 单向绑定无法同步视图到组件 #

你用的是[ngModel]单向绑定，它只会把组件里的question.pass值渲染到视图，但不会把用户选择单选按钮的操作同步回组件属性。得改成双向绑定[(ngModel)]才能实现数据的双向同步。

2. 字符串value与number类型不匹配 #

你的SmbwaQuestion类里pass是number类型，但单选按钮的value="1"是字符串类型。Angular在绑定的时候没法自动把字符串转换成数字，所以即使选中了按钮，也没法正确赋值到pass属性上。

修改后的HTML代码 #

<tr *ngFor="let question of questionsFor(category)">
  <td>{{ question.question }}</td>
  <td>
    <!-- 用[value]绑定数字，配合双向[(ngModel)] -->
    <input type="radio" [value]="1" name="{{ question.id }}" [(ngModel)]="question.pass">Pass
    <input type="radio" [value]="0" name="{{ question.id }}" [(ngModel)]="question.pass">Fail
  </td>
</tr>

额外注意：初始化pass属性 #

另外要确保你在创建SmbwaQuestion实例的时候，给pass设置了初始值（比如0或者1），不然初始状态下pass是undefined，可能会导致单选按钮的选中状态异常，提交时也容易出现问题。比如在组件里初始化数组的时候：

// 示例：初始化问题数组
this.questions = [
  {id: 1, question: "问题1", pass: 0} as SmbwaQuestion,
  {id: 2, question: "问题2", pass: 1} as SmbwaQuestion
];

// 或者如果是从后端获取数据，确保返回的每个对象都有pass字段，或者手动赋值
this.api.getQuestions().subscribe(res => {
  this.questions = res.map(q => ({...q, pass: q.pass ?? 0} as SmbwaQuestion));
});

这样修改之后，当你选择单选按钮时，question.pass就会自动更新为对应的数字，提交时就能拿到正确的值了。

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