使用*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，单选按钮可以正常工作，但是值不会被设置。这里有什么解决方法吗？

如果我删除ngModel，单选按钮可以正常工作，但是值不会被设置。这里有什么解决方法吗？

- Abhi

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>

工作示例

点击此处查看工作示例

- Pardeep Jain

---

嗯，您的“工作示例”过去是否出现在此处，但现在已经消失了？ - WillDeStijl

@WillDeStijl 嘿，感谢你指出来，示例已经过时了。现在请检查。 - Pardeep Jain

Answer 2

尝试类似以下的方法。

   <div class="radio" *ngFor="let key of enum_details">
          <label>
                 <input type="radio" name="keys_on_hand" [value]="key.value" [(ngModel)]="key.value">
                   {{key.display}}
          </label>
    </div>

- Yashasvi

Answer 3

您可以像这样使用表单控件。

<div class="form-check form-check-inline pl-0" *ngFor="let class of classList>
                    <input class="form-check-input" id="enum_answer_{{class.type}}" [value]='class.type' name="type" type="radio" formControlName="type">
                    <label class="form-check-label" for="enum_answer_{{class.type}}">{{class.type}}</label>
                </div>

- Usman Saleh

Answer 4

在@Pardeep的回答基础上，您还应该使按钮对于需要键盘操作的用户也可以访问。在标签上添加tabindex和keyup监听器：

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

- Eric Soyke