Angular 4：默认单选按钮无法选中问题排查

这个问题的核心是数据类型不匹配导致的ngModel绑定失效，我来给你拆解清楚：

问题根源 #

sessionStorage存储的所有值都是字符串类型，而你的modelRadioGroup单选按钮用的是[value]="model.id"——这里的model.id应该是数字类型（从你生成的HTML里ng-reflect-value="3"也能佐证这一点）。

Angular在匹配ngModel和单选按钮的value时，用的是**严格相等（===）**判断。当你把sessionStorage拿到的字符串（比如"3"）赋值给modelRadioBtn后，字符串和数字无法通过严格相等校验，所以单选按钮不会被选中，哪怕控制台打印出来的内容看起来一模一样。

而你硬编码this.shiftRadioBtn = "1"能生效，是因为对应的单选按钮用的是value="1"（字符串类型），字符串和字符串匹配自然没问题。

解决方案 #

你可以选以下两种方式之一来修复：

方案1：把单选按钮的value转换成字符串

修改HTML里的单选按钮绑定，把model.id转成字符串类型，和sessionStorage的取值类型保持一致：

<input type="radio" name="modelRadioGroup" [value]="model.id.toString()" [(ngModel)]="modelRadioBtn" (change)="popuplateBySearchFilter()">

或者用字符串插值的方式（插值会自动把值转成字符串）：

<input type="radio" name="modelRadioGroup" value="{{model.id}}" [(ngModel)]="modelRadioBtn" (change)="popuplateBySearchFilter()">

方案2：把sessionStorage的取值转换成数字

在component.ts里，将从sessionStorage拿到的字符串转成数字类型，再赋值给modelRadioBtn：

ngOnInit() {
  this.modelId = sessionStorage.getItem("MODEL_ID");
  this.shiftRadioBtn = "1";
  this.modelRadioBtn = Number(this.modelId); // 转换为数字类型
  console.log("["+this.modelRadioBtn+"]", typeof this.modelRadioBtn); // 可以加typeof验证类型是否正确
}

验证方法 #

你可以在控制台打印类型来确认问题：

console.log(typeof this.modelRadioBtn, typeof this.modelsList[0].id);

会看到一个是string一个是number，这就是问题的关键所在。

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