Question

我设计了自定义单选按钮，该按钮在静态下正常工作，但是当我设置为动态时，它就像复选框一样。

<div *ngFor="let currentwork of currentworks">
    <label class="customcheck">{{currentwork}}
        <input type="radio" name="{{currentwork}}">
        <span class="checkmark"></span>
    </label>&nbsp;
</div>

如果我输入name={{currentwork}}，它将像复选框一样起作用。我想选择一个单选按钮。我不知道为什么会这样，请帮助我。

Answer 1

您需要为每个选项设置value，而不是name。每个选项的名称应相同。您还可以在[value]上使用绑定括号标记value="{{}}。

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">{{currentwork}}
    <input name="myRadioButton" type="radio" [value]="currentwork">
    <span class="checkmark"></span>
  </label>&nbsp;
</div>

Stackblitz

Answer 2

单选按钮的名称必须相同。

这可能有效：

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">{{currentwork}}
    <input type="radio" name="currentworks" [value]="currentwork">
    <span class="checkmark"></span>
  </label>&nbsp;
</div>

Answer 3

通过反应形式方法，您可以使用--

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">
     <input type="radio" [value]="currentwork.id" 
       formControlName="radiobuttoncontrolname">
     <span class="checkmark"></span>
     <span class="customcheck">{{currentwork.Name}}</span>
  </label>
</div>

我假设您的currentWorks为-

currentWorks = [
 { id: 'something', Name: 'something' },
 { id: 'something2', Name: 'something2' }
];

Answer 4

要使单选按钮正常工作，您需要提供相同的名称，并为每个选项提供一个值。

一个有效的例子应该是：

<div *ngFor="let currentwork of currentworks">
    <label class="customcheck">{{currentwork}}
    <input type="radio" name="options" value="{{currentwork}}">
    <span class="checkmark"></span>
    </label>&nbsp;
</div>

如您所见，我给所有输入值赋予一个相同的名称（选项），然后使用currentwork作为值。

这是一个可行的示例（请检查app.ts）

编辑：您甚至可以生成多个单选。但是您应该分享一个动态数据示例。

http://next.plnkr.co/edit/zuhY7kgzPj6141oY?preview

Angular：如何以角度动态地实现自定义单选按钮

4 个答案: