页面首次加载时Angular Material mat-radio-buttons不显示求助

针对你遇到的mat-radio-buttons首次加载不显示的问题，结合代码场景可以从以下几个方向排查解决：

1. 确认Angular Material Radio模块已正确导入 #

确保使用单选按钮的组件所属模块中，已经导入MatRadioModule并添加到imports数组：

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    // 其他必要模块
    MatRadioModule
  ]
})
export class YourComponentModule { }

如果组件属于独立模块（比如你示例中的child组件），对应的子模块也需要单独导入该模块。

2. 检查绑定变量的初始化与匹配性 #

若使用[(ngModel)]或表单控件绑定单选组，需保证绑定的变量有合法初始值，且与单选按钮的value属性一致：

// 组件类中初始化变量
selected: string = 'option1'; // 对应单选按钮的value值

模板示例：

<mat-radio-group [(ngModel)]="selected">
  <mat-radio-button value="option1">选项1</mat-radio-button>
  <mat-radio-button value="option2">选项2</mat-radio-button>
</mat-radio-group>

如果是父组件传值（如你示例中的data输入属性），要确保父组件传递的selected值与子组件单选按钮的value匹配，且在子组件初始化时能正确获取到值：

// 子组件中确保初始化逻辑正确
ngOnInit() {
  this.selected = this.data?.selected || '默认选项值';
}

3. 验证Material样式是否正确加载 #

Angular Material组件依赖主题样式渲染，需确保已在全局样式文件（如styles.scss）中引入主题：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

也可以通过angular.json的styles数组配置全局样式引入。

4. 异步数据场景下的渲染控制 #

如果单选按钮的选项是通过异步请求获取的，需添加渲染时机控制，避免数据未加载完成时渲染组件：

<mat-radio-group *ngIf="options?.length > 0" [(ngModel)]="selected">
  <mat-radio-button *ngFor="let opt of options" [value]="opt.value">{{opt.label}}</mat-radio-button>
</mat-radio-group>

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