Блог

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

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

}
  

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

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

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

Вам необходимо использовать синтаксис привязки 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>