typescript - Angular 7 - Cara mengikat nilai ke tombol radio

Saya mencoba menggunakan tombol radio pada proyek saya tetapi saya gagal mencentang tombol radio pertama secara programatis.

Saya sudah mencoba Solusinya, tetapi itu masih tidak bekerja di kode saya.

Ini adalah tombol radio saya:

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

dan berikut adalah Typescript saya:

export class Component   implements OnInit  {
  actionUpload:number = 1


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

  }


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

Ini adalah hasil yang saya dapatkan, radio 1 tidak pernah dicentang.

Apakah saya melewatkan sesuatu??

Saya akan senang dengan bantuan apa pun.

Jawaban #1

Dengan value=1, itu memperlakukan nilai tersebut sebagai string.

Anda dapat memeriksa elemen HTML dan akan mendapatkan ini

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

yang mana Anda akan melihat nilainya menjadi sebuah string.

Anda harus menggunakan input binding (tanda kurung siku) dengan [value]="1".

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

Demo Contoh StackBlitz

Sementara saya pikir [checked] dan (ngModelChange) tampaknya menduplikasi (fungsi) ketika Anda telah menggunakan [(ngModel)] (binding dua arah).

Anda sebaiknya menggunakan (hanya) salah satu dari ini:

1. [dicentang] atau

2. [ngModel] dan (ngModelChange) atau

3. [(ngModel)]