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>

下面是我的打字稿：

<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>

这是我得到的结果，无线电 1 从未被检查过。

我错过了什么吗？

我很乐意提供任何帮助。

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 演示示例

虽然我认为当您使用（双向绑定）时[checked]似乎会重复（功能）。(ngModelChange)[(ngModel)]

您应该（仅）使用其中之一：

1. [checked]或者

2. [ngModel]和(ngModelChange)或

3. [(ngModel)]