"ngFor" 中的 Angular Use 单选组

Question

如何使用"选项"就像收音机里的几个问题一样?

设置"ngModel"出错

遵循代码:

<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']">  
<input  class="form-check-input" type="radio"  
id="opcoes_{{pergunta.id}}" 
[ngModel]="pergunta.resposta" 
(ngModelChange) ="pergunta.resposta = $event" 
name="opcoes_{{pergunta.id}}"
value = "{{pergunta.id}}"
> 
{{opcao}}   
</div> 
</div>

图片在这里

Answer 1

您在此单选按钮组中配置了错误的方式。当你创建单选按钮组时，你需要遵循一些规则。

1. 对于单个组name属性应该相同。
2. value属性包含您预览的值，作为相关单选按钮的标签。(大多数情况下是相同的标签值或该值的id)

所以在你的情况下，你必须改变一些东西以使你的代码正常工作。

...
<input  class="form-check-input" type="radio"  
id="opcoes_{{pergunta.id}}" 
[ngModel]="pergunta.resposta" 
(ngModelChange)="pergunta.resposta = $event" 
name="opcoes_{{pergunta.id}}"
value="{{opcao}}" 
> <!-- change value="{{pergunta.id}}" to value="{{opcao}}" -->
{{opcao}}
...