Question

我不确定为什么我在组件中得到两个不同的值。当我第一次点击Shift A时，我得到的值是2，然后当我再次点击时，我得到1.任何想法为什么会这样......

另外，我想在页面加载时选择Shift A.在此先感谢您的帮助!!

线路侧-monitor.component.html：

<div class="box">
            <div class="row moveright">
                <div>
                    Shift A <input type="radio" name="shiftRadioGroup" [value]="1" [(ngModel)]="shiftRadioBtn" (click)="popuplateBySearchFilter(1)">
                </div>
                <div class="notsotall">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
                <div>
                    Shift B <input type="radio" name="shiftRadioGroup" [value]="2" [(ngModel)]="shiftRadioBtn"         (click)="popuplateBySearchFilter(2)">
                </div>
            </div>
      </div>

线路侧-monitor.component.ts

@Component({
  selector: 'app-lineside-monitor',
  templateUrl: './lineside-monitor.component.html',
  styleUrls: ['./lineside-monitor.component.css']
})
export class LinesideMonitorComponent implements OnInit {
public shiftRadioBtn: string;// = "1";
ngOnInit() {
      this.shiftRadioBtn="1";
}

popuplateBySearchFilter(modelId: number) {
    alert(this.shiftRadioBtn);
}
}

Answer 1

由于您将这些单选按钮值视为string，因此请使用value属性而不是[value]（属性绑定）。否则，您必须将初始shiftRadioBtn值设置为1（数字）而不是"1"（字符串）

另外，要在更改单选按钮选择时获取正确的值，请使用change事件代替click事件。

<div>
    Shift A 
    <input type="radio" name="shiftRadioGroup" value="1" 
      [(ngModel)]="shiftRadioBtn" (change)="popuplateBySearchFilter(1)" />
</div>
<div class="notsotall">
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
</div>
<div>
    Shift B 
    <input type="radio" name="shiftRadioGroup" value="2" 
     [(ngModel)]="shiftRadioBtn" (change)="popuplateBySearchFilter(2)" />
</div>

正在运行Stackblitz Demo

Answer 2

为什么呢？因为您将模型以双向模式绑定到单选按钮，所以每当您自动单击单选按钮时，它会根据单选按钮中的shiftRadioBtn更改[value]模型。 / p>

Angular 4：组件中单选按钮值的两个不同值

2 个答案: