Angular 4中ngFor内单选按钮（Radio button）异常问题

这问题我之前处理过，核心是单选按钮组的绑定逻辑出了问题，咱们来一步步理清和修复：

首先先看你提供的模板代码：

<li *ngFor="let x of addressdata;let i = index">
  <div class="col-md-2">
    <input type="radio" [value]="x.PreferedAddress" [(ngModel)]="x.PreferedAddress" (ngModelChange)="RadioCheck(i)" name="radiogroup" id="Prefered"/>
  </div>
</li>

问题分析 #

1. 单选组逻辑冲突：所有单选按钮共用name="radiogroup"，但你把ngModel绑定到了每个item自己的x.PreferedAddress属性——单选按钮组的设计是整个组绑定到同一个变量，这样才能保证选中一个时其他自动取消，而不是每个item各自维护选中状态。
2. 重复value导致浏览器默认选中：你的数据里只有一行PreferedAddress=1，其余都是0，这意味着多个单选按钮的value都是0。当多个同name的单选按钮value相同时，浏览器会默认选中最后一个，这就是你看到的现象。

修复方案 #

我们需要调整绑定逻辑，让单选组绑定到一个全局变量，同时用item的唯一标识作为value，再初始化时选中对应项：

1. 组件类中添加全局变量并初始化

假设你的addressdata每个item有唯一的id属性（如果没有，可以用索引或者其他唯一标识）：

// 组件类中定义
selectedAddressId: number;

ngOnInit() {
  // 从数据中找到PreferedAddress为1的项，设置为默认选中
  const preferredItem = this.addressdata.find(item => item.PreferedAddress === 1);
  if (preferredItem) {
    this.selectedAddressId = preferredItem.id;
  }
}

// 更新RadioCheck方法，同步修改数据中的PreferedAddress值
RadioCheck(index: number) {
  // 先把所有项的PreferedAddress设为0
  this.addressdata.forEach(item => item.PreferedAddress = 0);
  // 再把选中的项设为1
  this.addressdata[index].PreferedAddress = 1;
}

2. 修改模板代码

<li *ngFor="let x of addressdata;let i = index">
  <div class="col-md-2">
    <input 
      type="radio" 
      [value]="x.id" <!-- 用item的唯一id作为value -->
      [(ngModel)]="selectedAddressId" <!-- 绑定到全局变量 -->
      (ngModelChange)="RadioCheck(i)" 
      name="radiogroup" 
      id="Prefered-{{i}}" <!-- 每个单选按钮的id要唯一，避免DOM冲突 -->
    />
  </div>
</li>

为什么这样有效？ #

• 全局变量selectedAddressId绑定整个单选组，确保同一时间只有一个选项被选中，符合单选按钮的交互逻辑。
• 用item的唯一id作为value，避免了多个单选按钮value重复的问题，浏览器不会再默认选中最后一个。
• 给每个单选按钮设置唯一的id，符合HTML规范，避免DOM元素id重复导致的潜在问题。
• RadioCheck方法同步更新数据中的PreferedAddress值，保证视图和数据的一致性。

内容的提问来源于stack exchange，提问作者madhu Goud