Angular 4分组动态单选按钮选中状态异常问题求助

嘿，我一眼就看出问题所在啦！你现在所有单选按钮的name属性都设成了choices，而HTML里同名的单选按钮会被浏览器认定为同一组——这就导致你选了第二组的选项时，浏览器会自动取消第一组的选中状态，因为它觉得这是同一组里的单选切换。

修复方法很简单：给每个单选按钮组设置唯一的name值 #

你可以利用每个modal对象的id来生成唯一的name，这样不同组的单选按钮就不会互相影响了。

修改你的视图组件代码，把单选按钮的name属性改成：

name="choices-{{modal.id}}"

完整的修改后代码片段：

<div class="pop-mid">
  <div class="pop-tab-block">
    <div *ngFor="let modal of modalArray" class="pop-tab-item">
      <h2 class="main-subheading-type2">{{ modal.name }}</h2>
      <ul>
        <li *ngFor="let choice of modal.child">
          <span class="food-type ft-veg"></span>
          <div *ngIf="modal.choicetype=='single'" class="rsnt-opt-chk">
            <!-- 这里修改了name属性，加入modal.id来区分组 -->
            <input 
              type="radio" 
              (change)="onChange(modal.id,choice.id, $event.target.checked,modal.choicetype)" 
              name="choices-{{modal.id}}"
              <!-- 可选：绑定默认选中状态 -->
              [checked]="choice.default === choice.value"
            />
            <label>{{ choice.name }}</label>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

额外优化：默认选中逻辑 #

我看到你的数据里有default字段，所以可以加上[checked]="choice.default === choice.value"来自动选中默认选项，这样页面加载时就能显示预设的选中状态啦。

这样修改之后，每个组的单选按钮都是独立的，切换组的时候就不会互相取消选中状态了～

内容的提问来源于stack exchange，提问作者Sandip Nag