Angular 7 - 如何将值绑定到单选按钮

Question

我正在尝试在我的项目中使用单选按钮，但我无法通过编程方式检查第一个单选按钮。

我已经尝试了解决方案，但它在我的代码中仍然无法工作。

这是我的单选按钮：

<div class="col-sm-3 col-form-label" style="padding-right: 0px;">
    <input type="radio" value=1 [checked]="actionUpload == 1" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(1)"> Radio 1
    <input type="radio" value=2 [checked]="actionUpload == 2" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(2)"> Radio 2
</div>

以下是我的 TypeScript 代码：

export class Component   implements OnInit  {
  actionUpload:number = 1


  constructor() { 
       //some code here
  }
  ngOnInit() {
      //some code here

  }


  choose(upT:number){
    this.actionUpload = upT
  }
}

这是我得到的结果，单选框1从未被选中。

我有什么遗漏吗？？

非常感谢任何帮助。

- Hansen

Answer 1

使用value=1，它会将该值视为字符串。

您可以检查HTML元素，并获得以下结果：

<input _ngcontent-tmu-c101="" type="radio" value="1" name="uploadAction" 
  ng-reflect-value="1" 
  ng-reflect-name="uploadAction" ng-reflect-model="1" 
  class="ng-pristine ng-valid ng-touched">

你会看到值变成字符串。

你应该使用 输入绑定（方括号）和[value]="1"。

<input
    type="radio"
    [value]="1"
    name="uploadAction"
    [(ngModel)]="actionUpload"
  />
  Radio 1
  <input
    type="radio"
    [value]="2"
    name="uploadAction"
    [(ngModel)]="actionUpload"
  />

示例 StackBlitz 演示

---

我认为当你使用 [(ngModel)]（双向绑定）时，[checked] 和 (ngModelChange) 似乎是重复的（功能）。

您应该只使用以下其中一个：

1. [checked] 或者

2. [ngModel] 和 (ngModelChange) 或者

3. [(ngModel)]

- Yong Shun