单选按钮的角度中 id 属性的唯一值答案

【问题标题】：unique value to id attribute in angular for a radio button单选按钮的角度中 id 属性的唯一值
【发布时间】：2019-03-29 11:59:51
【问题描述】：

我需要为每个单选按钮设置一个唯一的 ID。这个相同的按钮以相同的形式重复 4 次。

（字段 1：前两个收音机选项，字段 2：接下来的 2 个收音机选项

我正在尝试为 id 设置一个唯一值，但没有这样做。

需要：[id]="g.name - g.id"

尝试过：[id] ="{{'g.name'+ g.id}}

单选按钮 HTML：

 <div *ngFor="let g of groups">
     <input type="radio" 
            [name]="g.name"  
            [id]="g.name"   <!-- expected id="g.name+g.id" -->
            [value]="option.value"                      
            [(ngModel)]="radioModel[groupId]" 
            [checked]="option.selected"/>
     <label [for]="option.name">{{option.name}}
 </div>

任何建议都会有所帮助。

【问题讨论】：

标签： angular forms radio-button

【解决方案1】：

尝试使用行索引并在 id 属性中使用该索引。

<div *ngFor="let g of groups;let i =index;">
     <input type="radio" 
            [name]="g.name"  
            [id]="i"   <!-- expected id="g.name+g.id" -->
            [value]="option.value"                      
            [(ngModel)]="radioModel[groupId]" 
            [checked]="option.selected"/>
     <label [for]="option.name">{{option.name}}
 </div>

您的组数组包含 1 行还是 4 行？

【讨论】：

总共两个字段/行。第一个字段有两个单选按钮，比如男性女性。另一个字段因此具有相同的两个单选按钮。所以想根据 id 区分所有这些
好的，意味着你的组数组是这样的：group:[{id:1,name:'male'},{id:2,name:'female'}] 并且你想绑定这个两次（4 次单选按钮）？
是的。 id 为 1 的组应该有一个性别选择，id 为 2 的组应该有另一个，就像你有 { group1: male , group2: female } 一样。使用您的 [id]="index" 方法，我将第 1 组作为第一行单选按钮的 id，将第 2 组作为第二个单选按钮的 id。所以我也需要将一些东西与索引连接起来，比如 [id]="index + 'group.name"。但我无法连接。
让我为此创建一个工作示例。稍后更新您。
请查看此链接上的示例：stackblitz.com/edit/…。如果需要任何输入，请告诉我。

【解决方案2】：

我认为这两个绑定之一就是你想要做的：

[id]="g.name + g.id"         <!-- No separation between g.name and g.id -->
[id]="g.name + '-' + g.id"   <!-- g.name and g.id separated with a dash -->

请参阅this stackblitz 以获取演示。

【讨论】：

由于某种原因不适用于我的。将我的自定义代码插入 stackblitz 并尝试
您也可以在控制台中查看运行代码时是否有错误。

【解决方案3】：

让你的单选按钮 id 像这样

[id]="{{g.name + g.id + 'radio1'}}"   <!-- expected id="g.name+g.id" -->

下一个单选按钮使用“radio2”，这将使每个单选按钮的 ID 不同

【讨论】：

该代码在*ngFor 中进行评估；没有机会“使用'radio2'”。