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

发布时间：2020-12-17 17:59:11 所属栏目：安全来源：网络整理

导读：我需要基于对象阵列长度的动态数量的单选按钮(例如：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_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,无线电工作正常,但是,没有设置值.这可以解决什么问题？

解决方法

像这样使用你的代码

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!