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 從未被檢查過。

我錯過了什么嗎？

我會很高興有任何幫助。

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)似乎重復 (function)。

您應該（僅）使用其中之一：

1. [checked]或

2. [ngModel]和(ngModelChange)或

3. [(ngModel)]