Angular中ngFor渲染单选按钮数据显示异常问题求助

我来帮你分析下问题根源，再给出可行的修复方案：

问题出在哪？ #

你所有的单选按钮都用了相同的name="score"属性，按照HTML的规则，同名的单选按钮会被归为同一组，同一组里只能选中一个选项。这就导致页面上所有科目的单选按钮都挤在同一组里，最终只有最后一个科目的选项能保持选中状态，前面的都会被覆盖。

修复后的代码 #

我们需要给每个科目的单选按钮组生成唯一的name属性，可以结合班级索引和科目索引来做标识，同时也要修正重复的id（避免DOM元素id冲突），还可以加上标签提升交互体验：

<div *ngFor="let classItem of classes; let classInd = index">
    {{classItem.class}}
    <div *ngFor="let mark of classItem.subject; let markInd = index">
        {{mark.name}}
        <input type="radio" [value]="0" [name]="'score-' + classInd + '-' + markInd" [id]="'zero-' + classInd + '-' + markInd" [(ngModel)]="mark.score">
        <label for="zero-{{classInd}}-{{markInd}}">0</label>
        
        <input type="radio" [value]="1" [name]="'score-' + classInd + '-' + markInd" [id]="'one-' + classInd + '-' + markInd" [(ngModel)]="mark.score">
        <label for="one-{{classInd}}-{{markInd}}">1</label>
        
        <input type="radio" [value]="2" [name]="'score-' + classInd + '-' + markInd" [id]="'two-' + classInd + '-' + markInd" [(ngModel)]="mark.score">
        <label for="two-{{classInd}}-{{markInd}}">2</label>
        
        <input type="radio" [value]="3" [name]="'score-' + classInd + '-' + markInd" [id]="'three-' + classInd + '-' + markInd" [(ngModel)]="mark.score">
        <label for="three-{{classInd}}-{{markInd}}">3</label>
    </div>
</div>

关键修改说明 #

1. 把循环变量class改成classItem——class是JavaScript关键字，避免潜在语法冲突
2. 生成唯一的name：'score-' + classInd + '-' + markInd，让每个科目拥有独立的单选按钮组
3. 同步更新id并添加<label>标签，点击标签也能选中对应单选按钮，提升用户体验
4. 保留[(ngModel)]="mark.score"双向绑定，修改单选按钮时数据会自动同步，完美支持重新编辑得分

这样修改后，每个科目的单选按钮组都是独立的，既能正确显示初始选中状态，也能正常进行编辑操作了。

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