Angular Material 17单选按钮默认选中问题求助

核心原因：数据类型不匹配 #

你的selectedId初始值是数字类型的-1，但DataDto定义的id是字符串类型，Angular的ngModel采用严格相等（===）匹配值，类型不一致直接导致两个问题：

1. 初始状态下，数字-1和第一个单选按钮的字符串"-1"不匹配，所以默认未选中；
2. 选中列表项时，字符串类型的info.id赋值给数字类型的selectedId，会触发隐式类型转换，导致<pre>显示异常。

修复步骤 #

1. 统一变量与值的类型 #

将selectedId的初始值改为字符串类型，确保和所有单选按钮的value类型一致：

// ts文件修改
selectedId = "-1"; // 从数字-1改为字符串"-1"

2. 移除冗余的checked属性 #

mat-radio-group结合[(ngModel)]会自动管理选中状态，手动设置[checked]属于多余操作，移除后代码更简洁：

<!-- html文件修改 -->
<mat-radio-group [(ngModel)]="selectedId">
    <mat-radio-button value="-1">
        <span i18n="@@keep-origin">Keep origin</span>
    </mat-radio-button>
    @for (info of data; track info.id) {
        <mat-radio-button [value]="info.id">{{ info.label }}</mat-radio-button>
    }
</mat-radio-group>
<pre>{{ selectedId }}</pre>

3. 验证效果 #

修改完成后：

• 初始时selectedId="-1"会和第一个单选按钮的value="-1"匹配，默认选中；
• 选中列表中的选项时，selectedId会正确接收info.id的字符串值，<pre>标签显示内容与实际info.id一致。

补充说明 #

Angular Material的mat-radio-group在使用ngModel绑定时，会严格校验绑定变量与单选按钮value的类型，只有类型和值完全匹配时，才会触发选中状态的同步。

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