如何通过ngFor循环索引预选中Angular单选按钮组的首个选项？

我懂你遇到的这个坑——当你同时用[(ngModel)]绑定单选按钮和[checked]属性时，ngModel会完全接管控件的选中状态，直接设置[checked]="i === 0"根本不会生效，因为Angular会优先用ngModel绑定的值来渲染状态。而且你要求只在视图层处理，不修改组件类里的默认值，那我们可以通过调整ngModel的绑定逻辑来实现需求：

修改后的代码 #

<div class="left-menu" *ngFor="let position of allStyles">
  <h4>{{position.position_name}}</h4>
  <div class="checkbox" *ngFor="let subpostion of position.sub_position.items; index as i">
    <label>
      <input 
        type="radio" 
        [id]="position.position_name+i" 
        [name]="'group'+position.position_name" 
        [value]="subpostion.id" 
        [ngModel]="custom[position.position_name] || (i === 0 ? subpostion.id : null)"
        (ngModelChange)="custom[position.position_name] = $event"
      > 
      {{subpostion.subposition_name}}
    </label>
  </div>
</div>

逻辑说明 #

1. 我们把双向绑定的[(ngModel)]拆成了单向绑定[ngModel]和事件绑定(ngModelChange)，这样能手动控制初始值的逻辑，同时保留后续的双向同步能力。
2. 在[ngModel]的绑定表达式里：
   • 如果custom[position.position_name]已经有值（比如组件类里之前设置过），就用这个已有值；
   • 如果没有值，且当前是组内第一个选项（i === 0），就把当前选项的subpostion.id作为初始值，实现预选中效果；
   • 非第一个选项则传入null，不会影响选中状态。

这样就能完全在视图层实现每组首个单选按钮的预选中，不需要修改component.ts里的任何默认值配置。

内容的提问来源于stack exchange，提问作者gowtham rajan