在 Quiz Angular 5 中处理多个单选按钮答案

【问题标题】：Handling multiple radio buttons in a Quiz Angular 5在 Quiz Angular 5 中处理多个单选按钮
【发布时间】：2018-11-19 04:31:39
【问题描述】：

我是 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)] 属性，这也很有效。

这就是我想要完成的事情

问题：当我从第二个问题中选择一个选项时，它会从第一个问题中取消选择所选选项。意味着我只能从两个问题中选择一个选项。

请帮助我，我做错了什么。我已经被困在这里两天了。

【问题讨论】：

Multiple radio button groups in one form的可能重复
检查这个 {{question.id}} 是否对所有问题都不同？因为只有当您为不同的问题使用具有相同名称属性的单选按钮时才会发生这种情况。
是的，这两个问题的 {{question.id}} 都不同。这在我删除 [(ngModel)] 属性时有效，但是在提交表单时我无法获取该值。
您使用带有单选按钮的 ngModel 的方式似乎有些问题！分享一些小提琴，我可以检查什么问题
我不知道该怎么做 :(

标签： html angular radio-button angular5 angular4-forms

【解决方案1】：

好的，Git 已排序。问题出在 ngModel 和 name 属性上

这样可以正常工作

<input [(ngModel)]="options[question.id]" [checked]="options[question.id]" value="{{question.id}}-{{option.id}}" type="radio"
      name="option{{question.id}}">

在打字稿中

options: any = [];
option: any = [];

【讨论】：