工作示例

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

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>

Answer 3

以@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>

Answer 4

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

<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>

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

4 个答案:

工作示例