带单选按钮的角度嵌套ngFor

Question

嗨，我试图循环每个变量，然后为每个选项分配一个单选按钮，我的问题是，我只能选择总变量中的一个项目，当我想获得每个变量的一个时，这就是我尝试索引的方法。谢谢你的帮助

let obj = {
variants: [
{name: "sauce", options: [{name: "soy", price: 3}, {name: "mayo", price: 1}]},
{name: "size", options: [{name: "xl", price: 4}, {name: "m", price: 2}]}
]
}

<div *ngFor="let variant of obj.variants; index as i">
<h6>{{variant.name}}</h6>                             
<div *ngFor="let option of variant.options; index as j">>
<div class="custom-control custom-radio">
<input id="option{{i}}{{j}}" type="radio" class="custom-control-input" [value]="option" [(ngModel)]="radioSelected" (change)="setRadioOption(variant, option)">
<label for="option{{i}}{{j}}" class="custom-control-label">{{option.name}}</label>
</div>
</div> 
</div> 

Answer 1

您需要通过添加name属性来对单选按钮进行分组，以获得所需的行为。

您的输入元素看起来像：

<input id="option{{i}}{{j}}" type="radio" name="option{{i}}" class="custom-control-input" [value]="option" [(ngModel)]="radioSelected" (change)="setRadioOption(variant, option)">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio