Угловые 6 радиокнопок не могут сгруппировать его по имени

Question

у меня есть массив

dataList = [
      {
        'Country' : 'India',
        'State'  : 'Kasmir'
      },
      {
        'Country' : 'India',
        'State'  : 'Karnataka'
      },
      {
         'Country' : 'Japan',
        'State'  : 'Tokio'
      },
      {
        'Country' : 'Japan',
        'State'  : 'Huwai'
      }
    ]

}

Я хочу сделать это двумя разными группами радиокнопок, используя клавишу Country или любым другим способом. То, что я пробовал, ниже

<div *ngFor="let item of dataList">
       <input type="radio" name="item.Country">{{item.State}}
 </div>

Он создает переключатели, и я использую свойство name, чтобы разделить его на группы. Но это не сработало, как ожидалось, вместо этого я могу выбрать только одну радиокнопку один раз. Это образец у меня такой же сценарий внутри Angular mat-tree. пожалуйста, подскажите мне, что нужно сделать, чтобы сделать это как группу, используя имя или любые другие вещи. Пожалуйста, помогите мне с обобщенным решением

Answer 1

Вам необходимо использовать синтаксис привязки Angular.

Либо использовать:

<div *ngFor="let item of dataList">
       <input type="radio" [name]="item.Country">{{item.State}}
 </div>

или:

<div *ngFor="let item of dataList">
       <input type="radio" name="{{item.Country}}">{{item.State}}
 </div>