Angular 5动态渲染单选按钮组，如何默认选中第一个选项？

嘿，我来帮你搞定这个问题！当然可以用ngIf...then结构实现，不过先给你说最省心的常规方案（毕竟Angular是数据驱动的，这种方案最符合框架设计），再讲你想要的ngIf...then写法，顺便分析下你现有代码可能不生效的原因～

一、最推荐的常规方案：初始化ngModel绑定值 #

这是Angular表单的标准做法，直接在组件里把绑定的scheduleEvent初始化为数组的第一个元素就行，完全不需要额外的模板逻辑，简单又可靠。

组件代码： #

// 假设你的选项数组是schedules，示例结构如下
schedules = [
  { value: 'daily', label: '每日' },
  { value: 'weekly', label: '每周' },
  { value: 'monthly', label: '每月' }
];
scheduleEvent: any; // 和单选按钮绑定的变量

ngOnInit() {
  // 页面初始化时，将第一个选项赋值给scheduleEvent
  if (this.schedules.length > 0) {
    this.scheduleEvent = this.schedules[0];
  }
}

模板代码： #

<mat-radio-group class="example-radio-group" [(ngModel)]="scheduleEvent" name="schedule" #rg1>
  <mat-radio-button 
    class="example-radio-button" 
    style="margin-right:10px;" 
    *ngFor="let schedule of schedules" 
    [value]="schedule">
    {{ schedule.label }}
  </mat-radio-button>
</mat-radio-group>

这样一来，页面加载后第一个单选按钮就会自动选中——因为scheduleEvent已经绑定了数组的第一个元素，完全符合Angular的数据驱动理念。

二、用ngIf...then结构实现的方式 #

如果你一定要用ngIf...then的模板逻辑，核心是在循环时识别第一个元素，辅助确保选中状态（不过本质还是依赖ngModel的绑定，只是用模板语法显性标记第一个选项）。

模板代码： #

<mat-radio-group class="example-radio-group" [(ngModel)]="scheduleEvent" name="schedule" #rg1>
  <!-- 用ng-container包裹循环，避免生成额外DOM节点 -->
  <ng-container *ngFor="let schedule of schedules; let i = index">
    <mat-radio-button 
      class="example-radio-button" 
      style="margin-right:10px;" 
      [value]="schedule">
      <!-- 用ngIf...then区分第一个选项和其他选项 -->
      <ng-container *ngIf="i === 0; then defaultCheckedTpl else normalCheckedTpl"></ng-container>
      
      <ng-template #defaultCheckedTpl>
        {{ schedule.label }}
        <!-- 注意：不建议同时使用ngModel和手动checked属性，可能导致状态冲突，组件初始化scheduleEvent即可 -->
      </ng-template>
      
      <ng-template #normalCheckedTpl>
        {{ schedule.label }}
      </ng-template>
    </mat-radio-button>
  </ng-container>
</mat-radio-group>

这种写法其实有点冗余，因为核心逻辑还是组件里初始化scheduleEvent的值，ngIf...then只是在模板上做了显性区分，并没有改变选中的本质逻辑。如果完全依赖模板的checked属性而不初始化scheduleEvent，反而可能导致ngModel和视图状态不一致，所以建议结合组件初始化的方式使用。

三、你的现有代码不生效的可能原因 #

从你贴的代码片段来看，有几个大概率的问题：

1. 未初始化scheduleEvent：如果组件里scheduleEvent是空值，即使循环渲染了单选按钮，ngModel没有绑定目标值，自然不会有默认选中的选项。
2. 错误使用ng-checked属性：Angular的mat-radio-button是通过ngModel和[value]控制选中状态的，手动添加ng-checked会和ngModel的绑定逻辑冲突，应该移除这个属性。
3. [value]绑定内容不匹配：如果schedules数组里是对象，要确保scheduleEvent和数组元素是同一个引用（而非属性相同的新对象），否则ngModel无法识别匹配关系。

总结 #

• 优先选择组件初始化ngModel值的方案，这是最符合Angular设计的做法，简洁且不易出错。
• 如果一定要用ngIf...then，记得配合ngModel的初始化，避免手动控制checked属性导致状态冲突。

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