处理测验中的多个单选按钮 Angular 5

Question

我是 Angular 的新手，正在实施包含多个 MCQ 的测验。但是我在单选按钮 selection.

中遇到了问题

我的问题也来自数据库和选项。

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)] 属性，这会很好用。

这就是我想要完成的

问题： 当我 select 第二个问题的一个选项时，select 是第一个问题的 selected 选项题。意味着我只能select两个问题中的一个选项。

请帮助我，我做错了什么。卡在这两天了

Answer 1

好的，Git它已排序。问题出在 ngModel 和名称属性

像这样效果很好

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

在打字稿中

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

处理测验中的多个单选按钮 Angular 5

Handling multiple radio buttons in a Quiz Angular 5

html

angular

radio-button

angular5

angular4-forms