web-dev-qa-db-ja.com

ionic 4でion-radio-groupタグの選択された値を取得します

私は以下のコードを持っています：

<ion-item>
 <ion-radio-group [value]="profileItem.Sex" [(ngModel)]="profileItem.Sex">
  <ion-label class="input-label">{{ 'GENDER' | translate }}</ion-label>
  <div style="display: flex;">
    <span *ngFor="let genderType of genderTypeList">
      <span>{{genderType.title}}</span>
      <ion-radio [disabled]="profileItem.id" [value]="genderType.value"></ion-radio>
    </span>
  </div>
 </ion-radio-group>
</ion-item>

ただし、profileItem.Sexで選択した値を取得できません。
profileItem.Sexは変更されていません。
ion-radio-groupタグで選択した値を取得する方法は？

angularionic-frameworkionic4
3
or123456

IonChangeイベントでion-selectを使用することもできます。

 <ion-select (ionChange)="checkValue($event)"  interface="popover" 
      placeholder="Select One" >
        <ion-select-option *ngFor="let item of userData" [value]="item"> 
       {{item.optionA}}</ion-select-option>
 </ion-select>

TypeScriptの場合：

checkValue(event){ console.log(event.detail.value)}
4
Othmane Daanouni

パス $event変更イベントへ

    <ion-list radio-group *ngFor="let value of userData; let i= index;" 
       (ionChange)="checkValue($event)">
          <ion-list-header>
             {{value.text}}
          </ion-list-header>

          <ion-item>
             <ion-label>{{value.optionA}}</ion-label>
             <ion-radio  value="1"></ion-radio>
          </ion-item>

          <ion-item>
             <ion-label>{{value.optionB}}</ion-label>
             <ion-radio  value="2"></ion-radio>
          </ion-item>

    </ion-list>

TypeScriptで

    function checkValue(value)
    { //your code }
1
Abdul Basit

コンポーネント内：

@ViewChild('inputValue', { read: ElementRef }) inputValue: ElementRef;

値にアクセスするには：this.inputValue.nativeElement.value

あなたのhtmlで：

<ion-radio-group #inputValue>
.
.
.
</ion-radio-group>
0
Alfonso Martinez