使用*ngFor [Angular2]创建多个单选按钮

Question

我需要基于对象阵列长度的动态数量的单选按钮(例如:enum_details):

以下是我尝试过的代码:

<div *ngFor="let enum of enum_details">
  <label for="enum_answer_{{enum.value}}">
    <input id="enum_answer_{{enum.value}}" type="radio" name="enums" [(ngModel)]="enum.value">
    {{enum.display_text}}
  </label>
</div>

但是,当我单击任何无线电时,始终会选择最后一个无线电,并且该值永远不会分配给ngModel.

如果我删除ngModel,无线电工作正常,但是,没有设置值.这可以解决什么问题？

Answer 1

像这样使用你的代码

<div *ngFor="let enum of enum_details">
      <label for="enum_answer_{{enum.name}}">
        <input id="enum_answer_{{enum.name}}" [value]='enum.name' type="radio" name="enums" [(ngModel)]="radioSelected">
        {{enum.name}}
      </label>
    </div>
    <button (click)='radioFun()'>Checked value of radio button</button>

工作实例

Working example here