Angular 4单选按钮组件值异常及默认选中设置求助

我来帮你搞定这两个单选按钮的问题，咱们一步步拆解：

1. 点击Shift A时第一次取值异常的原因&解决 #

你遇到的第一次点Shift A拿到值2、第二次才拿到1的问题，根源在于你用了(click)事件来获取值——click事件会在Angular更新ngModel绑定之前触发。第一次点击时，shiftRadioBtn还保留着之前的默认值（应该是2），所以你拿到的是旧值；第二次点击时，ngModel已经同步成1了，自然能拿到正确值。

解决办法很简单：把(click)换成(change)事件，它会在ngModel更新完成后触发，每次都能拿到最新的选中值。修改后的HTML片段如下：

<div class="box">
  <div class="row moveright">
    <div>
      Shift A
      <input type="radio" name="shiftRadioGroup" [value]="1" [(ngModel)]="shiftRadioBtn" (change)="popupla...">
    </div>
    <!-- 假设你还有Shift B的单选按钮，示例如下 -->
    <div>
      Shift B
      <input type="radio" name="shiftRadioGroup" [value]="2" [(ngModel)]="shiftRadioBtn" (change)="popupla...">
    </div>
  </div>
</div>

2. 页面加载默认选中Shift A #

要实现默认选中，只需要在组件的TS代码里，把shiftRadioBtn变量初始化为1（对应Shift A的[value]="1"）就行，Angular会自动匹配并选中对应的单选按钮：

// lineside-monitor.component.ts
import { Component, OnInit } from '@angular/core';

export class LinesideMonitorComponent implements OnInit {
  // 初始化值为1，对应Shift A的单选按钮
  shiftRadioBtn: number = 1;

  ngOnInit() {
    // 你的其他初始化逻辑
  }

  popupla() {
    // 现在这里打印的就是最新的选中值了
    console.log(this.shiftRadioBtn);
  }
}

额外提醒 #

• 确保同组的单选按钮name属性完全一致（你已经设置了shiftRadioGroup，这点做得很好），这样浏览器才会把它们当作互斥的单选组。
• 注意[value]的类型和组件中变量的类型要匹配，比如这里用的是数字1/2，组件里也要用数字类型的变量，避免出现匹配失败的情况。

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