Angular：如何在Angular中动态实现自定义单选按钮

我设计了自定义单选按钮，它在静态中正常工作，但当我创建动态时，它的行为就像复选框

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

{{currentwork}}

---

如果我把

name={{{currentwork}}

放进去，它的行为就像复选框一样。我想要一个单选按钮。我不知道为什么会这样，请帮帮我。

单选按钮的名称必须相同

这可能会起作用：

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

{{currentwork}}

单选按钮的名称必须相同

这可能会起作用：

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

{{currentwork}}

您需要为每个选项设置

值，而不是
名称。每个选项的名称应相同。您还可以在
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>  


{{currentwork}}

您需要为每个选项设置
值，而不是
名称。每个选项的名称应该相同。您也可以在
值=“{}}
上使用绑定括号符号
[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>  


{{currentwork}}

使用反应式表单方法，您可以使用

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

使用反应式表单方法，您可以使用

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

要使单选按钮正常工作，您需要为每个选项指定相同的名称和值

一个有效的例子应该是：

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

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

这里是一个工作示例（检查app.ts）

编辑：您甚至可以生成多个无线电选择。但您应该分享一个动态数据的示例

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

一个有效的例子应该是：

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

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

这里是一个工作示例（检查app.ts）

编辑：您甚至可以生成多个无线电选择。但您应该分享一个动态数据的示例

单选按钮需要具有相同的名称属性，才能像一个对象一样工作。也许你想设定value@CristianTraìna我尝试了价值观，但它也不起作用。。你能简单地告诉我吗？单选按钮需要有相同的名称属性才能像一个对象一样工作。也许你想设定value@CristianTraìna我尝试了价值观，但它也不起作用。。你能简单地告诉我吗别忘了value@CristianTraìna值表示？？sry，我无法获取。该值是提交时传递的值，对于任何输入都需要不同radio@CristianTraìna谢谢你的建议：）我编辑了我的post@CristianTraìna谢谢，我有一个疑问，如果我使用formControlName，我会得到类似name和formcontrol必须匹配的错误。是否有可能实现不带名称属性的单选按钮？请不要忘记value@CristianTraìna值表示？？sry，我无法获取。该值是提交时传递的值，对于任何输入都需要不同radio@CristianTraìna谢谢你的建议：）我编辑了我的post@CristianTraìna谢谢，我有一个疑问，如果我使用formControlName，我会得到类似name和formcontrol必须匹配的错误。有没有可能实现没有name属性的单选按钮？我有动态数据，如果我添加了单选按钮字段数组，那么我不能为每个选项指定相同的名称，在这种情况下我该怎么做？请帮帮我。在这种情况下，我也很挣扎。@induce您应该分享一个完整的动态数据示例。我已经更新了Plunker，因此您可以看到模板有多个无线电输入选择，因此有两个不同名称的无线电选择。这一切都取决于动态数据是如何完成的。我有动态数据，如果我添加单选按钮字段数组，那时候我不能为每个选项指定相同的名称，在这种情况下我该怎么做？请帮帮我。在这种情况下，我也很挣扎。@induce您应该分享一个完整的动态数据示例。我已经更新了Plunker，因此您可以看到模板有多个无线电输入选择，因此有两个不同名称的无线电选择。这一切都取决于如何处理动态数据。