Angular中ngFor循环内使用单选框组时ngModel全选问题如何解决？

错误原因 #

• 同一问题下所有单选框的value值都绑定为pergunta.id，值完全相同导致选中一个就会触发同name下所有同value的单选框同时选中
• 所有单选框的id属性重复，不符合DOM id唯一的规范

修正后的代码 #

<div class="py-3" *ngFor="let pergunta of perguntas">  
            <label>{{pergunta.id}}</label> 
            <label>{{pergunta.texto_pergunta}}</label>   

                <div *ngFor="let opcao of ['Otimo','Bom','Regular','Ruim','Péssimo']; let index = index">  
                    <input  class="form-check-input" type="radio"  
                            id="opcoes_{{pergunta.id}}_{{index}}" 
                            [(ngModel)]="pergunta.resposta" 
                            name="opcoes_{{pergunta.id}}"
                            value = "{{opcao}}"
                            > 
                        {{opcao}}   
                </div> 
</div>

调整说明 #

• 将value绑定值改为当前遍历的选项opcao，保证同一问题下每个单选框的value唯一，只会选中对应选项
• 给单选框id增加序号后缀，保证全局DOM id唯一
• 用[(ngModel)]双向绑定语法简化写法，替代拆分的[ngModel]和(ngModelChange)，逻辑完全一致

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