Ionic Angular嵌套*ngFor生成选择框 全局仅可选中单个问题排查

原生HTML radio按钮的互斥规则完全依赖name属性：所有name属性值一致的radio会被识别为同一选择组，同组内同时仅能有一个选项被选中。
你当前生成的所有radio控件都未显式设置name属性，浏览器会默认将全局所有无name（或name值相同）的radio归为同一个组，最终导致跨所有行只能选中一个选项的异常。
另外你当前的ngModel绑定在单个选项对象的属性上，后续按行归集选中值、做全局求和时会多很多不必要的遍历判断，绑定层级可以优化。

• 给每一行的所有radio设置相同的组名，不同行的组名保证唯一，直接用外层*ngFor的索引生成组名即可，实现行内单选、行与行之间选择互不干扰的效果。
• 调整ngModel绑定目标，将单行的选中值绑定到对应行（即eachVariation对象）的属性上，后续归集数据、计算总和时逻辑更简洁。

修复后的模板代码如下：

<ion-row *ngFor="let eachVariation of productDetails.productVariations; let i = index">
  <div *ngFor="let eachVariationOption of eachVariation.variationOptions">
    <ion-col size="1.5" style="margin-bottom: 0.5em">
      <input
        [(ngModel)]="eachVariation.selectedVariation"
        type="radio"
        <!-- 核心：按行分配独立的radio组名 -->
        [name]="'variation-group-' + i"
        [value]="eachVariationOption"
        (click)="selectVariation(eachVariation, 'yes')"
      />
    </ion-col>
  </div>
</ion-row>

你可以直接在组件类中编写求和方法，在选中选项的回调中触发计算即可，示例逻辑：

getSelectedTotal(): number {
  let sum = 0;
  this.productDetails.productVariations.forEach(item => {
    // 把下面的valueField替换成你选项对象中实际存储数值、需要参与求和的字段名即可
    if (item.selectedVariation?.valueField) {
      sum += Number(item.selectedVariation.valueField);
    }
  });
  return sum;
}

内容的提问来源于stack exchange，提问作者Mohammed Arham Khan