Angular中如何获取*ngFor循环内各商品对应单选按钮的选中值

问题核心缺陷说明 #

现有代码存在两个导致无法正常获取选中值的问题：

• 所有单选按钮共用相同name="radioStatus"，导致页面全部单选属于同一组，切换任意单选会清空其他商品的选中状态
• 同一商品的3个单选按钮绑定了不同的ngModel字段，不符合单选组的绑定逻辑，无法正常存储选中值

具体解决方案 #

你只需要调整单选组的绑定规则，给每个商品的单选组设置唯一name，统一绑定同一个字段即可：

1. 给*ngFor增加索引变量，用来区分不同商品的单选组
2. 同一商品的3个单选按钮统一绑定到同一个变量，比如data.item.selectedStatus
3. 可以通过onChange事件在切换时实时获取当前商品的选中值，也可以直接遍历订单商品数组批量获取所有选中状态

修改后的模板代码

<!-- 增加索引i区分不同商品的单选组 -->
<div class="order-items-detail" *ngFor="let data of orderDetails.response.orderItems; let i = index">
    <div class="p-field-radiobutton">
        <p-radioButton [(ngModel)]="data.item.selectedStatus" 
            [ngModelOptions]="{standalone: true}"
            value="Picked"
            class="radio-margin"
            name="radioStatus-{{i}}" 
            (onChange)="getCurrentStatus(data, $event)"
        ></p-radioButton>
        <label>已拣货</label>
        <br />
        <p-radioButton [ngModelOptions]="{standalone: true}" 
            [(ngModel)]="data.item.selectedStatus"
            value="Unavailable"
            class="radio-margin"
            name="radioStatus-{{i}}"
            (onChange)="getCurrentStatus(data, $event)"
        ></p-radioButton>
        <label>无货</label>
        <p-radioButton [ngModelOptions]="{standalone: true}"
            value="Substitute"
            class="radio-margin"
            name="radioStatus-{{i}}" 
            [(ngModel)]="data.item.selectedStatus"
            (onChange)="getCurrentStatus(data, $event)"
        ></p-radioButton>
        <label>替换商品</label>
    </div>
</div>

对应的TS逻辑代码

// 切换单选时实时获取对应商品的选中值
getCurrentStatus(itemData: any, event: any) {
  // 当前所属商品的完整数据：itemData
  // 当前选中的单选值：event.value，也可以直接取itemData.item.selectedStatus
  console.log('当前商品信息：', itemData, '选中状态：', event.value)
}

// 需要批量获取所有商品的选中值时直接遍历数组即可
getAllItemStatus() {
  this.orderDetails.response.orderItems.forEach(item => {
    console.log('商品ID：', item.item.id, '选中状态：', item.item.selectedStatus)
  })
}

内容的提问来源于stack exchange，提问作者Hassan Hashmi