我是 Angular 的新手,正在实现一个包含多个 MCQ 的测验。 但是我在选择单选按钮时遇到了问题。
我的问题也来自数据库和选项。
mcq.component.html
<form (ngSubmit)="ff.form.valid && answer(ff)" #ff="ngForm">
<div *ngFor="let question of questions">
<p style="font-size: 25px;">{{question.title}}</p>
<div *ngFor="let option of question.options">
<input [(ngModel)]="option_model.selected_option_id" #selected_option_id="ngModel" type="radio" value="{{option.id}}" name="{{question.id}}">
<!-- <input type="radio" value="{{option.id}}" name="{{question.id}}" ngModel > --> //This way it works fine but I need to use [(ngModel)] to submit the form
{{option.title}}
</div>
</div>
<input style="float: right" type="submit" value="Submit"/>
</form>
注意:每个问题的 {{question.id}} 都是唯一的。此外,如果我删除 [(ngModel)] 属性,这会很好用。
问题:当我从第二个问题中选择一个选项时,它取消了从第一个问题中选择的选项。意味着我只能从两个问题中选择一个选项。
请帮助我,我做错了什么。我已经被困在这里两天了。
最佳答案
好的,Git 已排序。问题出在 ngModel 和名称属性上
这样很好用
<input [(ngModel)]="options[question.id]" [checked]="options[question.id]" value="{{question.id}}-{{option.id}}" type="radio"
name="option{{question.id}}">
在 typescript 中
options: any = [];
option: any = [];
关于html - 在 Quiz Angular 5 中处理多个单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50772057/