typescript - Angular 7 - Hogyan kell az értéket hozzákötni a rádiógombhoz

Megpróbálom használni a rádiógombot a projektemben, de nem sikerült programozottan bejelölnöm az első rádiógombot.

Próbáltam a megoldást, de a kódom még mindig nem működik.

Itt van a rádiógombom:

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

és alább látható a Typescript-em:

export class Component   implements OnInit  {
  actionUpload:number = 1


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

  }


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

Itt van az eredmény, amit kaptam, az 1-es rádiógomb soha nincs bejelölve.

Hiányzik valami??

Örülnék bármilyen segítségnek.

Válasz #1

A value=1 esetén az értéket karakterláncként kezeli.

Meg tudod vizsgálni a HTML elemet, és ezt kapnád

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

amelyből látnád, hogy az érték stringgé válik.

A input kötést (a szögletes zárójel) a [value]="1" használatával kell használnod.

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

Minta StackBlitz Demó

Bár úgy gondolom, hogy a [checked] és a (ngModelChange) úgy tűnik, duplikálja a (function)-t, amikor a [(ngModel)] (kétirányú kötés) van használatban.

Vagy az egyiket (csak) kellene használnod ezek közül:

1. [bejelölve] vagy

2. [ngModel] és (ngModelChange) vagy

3. [(ngModel)]