Уникальное значение атрибута id в угловых для радиокнопки

Question

Мне нужно установить уникальный идентификатор для каждой радиокнопки. Эта же кнопка повторяется 4 раза в той же форме.

(поле 1: первые два выбора радио, поле 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> 

Любые предложения будут полезны.

Answer 1

Я думаю, что вы пытаетесь сделать одну из этих двух привязок:

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

Смотрите этот стек для демонстрации.

Answer 2

Попробуйте использовать индекс строки и использовать этот индекс в атрибуте 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 строки?

Answer 3

Сделайте свой идентификатор радиокнопки таким

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

для следующей радиокнопки используйте 'radio2', что сделает каждый идентификатор радиокнопки другим