typescript - Angular 7 - Cum să legi valoarea la butonul radio

Încerc să folosesc butonul radio în proiectul meu, dar nu am reușit să selectez primul buton radio programatic.

Am încercat soluția, dar încă nu funcționează în codul meu.

Iată butonul meu radio:

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

și mai jos este Typescript-ul meu:

export class Component   implements OnInit  {
  actionUpload:number = 1


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

  }


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

Iată rezultatul pe care l-am obținut, radio 1 nu este niciodată bifat.

Îmi scapă ceva??

Aș fi recunoscător pentru orice ajutor.

Răspuns #1

Cu value=1, tratează valoarea ca un șir de caractere.

Poți inspecta elementul HTML și vei obține asta

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

încât ai vedea valoarea devenind un șir.

Ar trebui să folosești legarea inputului (paranteza pătrată) cu [value]="1".

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

Demonstrație exemplu StackBlitz

În timp ce cred că [checked] și (ngModelChange) par să se dubleze (funcția) atunci când ați folosit [(ngModel)] (legare bidirecțională).

Ar trebui să folosești (doar) unul dintre acestea:

[bifat] sau
[ngModel] și (ngModelChange) sau
```
[(ngModel)]
```