Angular 获取离子4中离子无线电组标签的选定值

我在下面有一个代码：

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

{{‘性别’|翻译}
{{genderType.title}

但无法在profileItem.Sex中获取所选值。
profileItem.性别未更改。

---

如何获取离子无线电组标签中的选定值？

将

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

---

您还可以将离子选择与离子更改事件一起使用：

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

//page.html

<ion-list>
       <ion-radio-group  [(ngModel)]="radioValue" (ionSelect)="showValue()">

                <ion-label >1</ion-label>
                <ion-radio slot="start" value="1"  ></ion-radio>

                <ion-label>2</ion-label>
                <ion-radio slot="start" value="2" ></ion-radio>                      
       </ion-radio-group>
  </ion-list>

在您的组件中：

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

要访问值：

this.inputValue.nativeElement.value

在html中：

<ion-radio-group #inputValue>
.
.
.
</ion-radio-group>

.
.
.

使用ionChange事件
文档：

在模板中：

<ion-list (ionChange)="changeVal($ev)">
<ion-radio-group>
    <ion-list-header>
        <ion-label>
            Auto Manufacturers
         </ion-label>
   </ion-list-header>
   <ion-item *ngFor="let genderType of genderTypeList" [disabled]="profileItem.id">
      <ion-label>{{ 'GENDER' | translate }}</ion-label>
      <ion-radio [value]="profileItem.Sex"></ion-radio>
    </ion-item>
...
</ion-radio-group>

changeVal(ev){
    console.log('your value: ', ev.detail.value);
}

---

您只需要在

组件中使用

v-model=“”

以下是离子vue 3无线电组示例（2021年）

外表
黑暗的
白色
进口{
IonList，IonListHeader，
爱奥尼尔电台，
IonRadioGroup，
IonLabel，
项目,，
}来自“@IONAL/vue”；
从“vue”导入{ref}；
导出默认值{
名称：“设置”，
组件：{IonList、IonListHeader、IonRadio、IonRadioGroup、IonLabel、IonItem}，
设置（）{
让模式=参考（“白色”）；
// 
设置间隔（（）=>{
console.log（'selected mode:'，mode.value）；
}, 2000);
返回{mode}；
},
};

Yessss感谢应该获取event.detail.value并设置为user.data.gender，例如

<ion-radio-group #inputValue>
.
.
.
</ion-radio-group>

<ion-list (ionChange)="changeVal($ev)">
<ion-radio-group>
    <ion-list-header>
        <ion-label>
            Auto Manufacturers
         </ion-label>
   </ion-list-header>
   <ion-item *ngFor="let genderType of genderTypeList" [disabled]="profileItem.id">
      <ion-label>{{ 'GENDER' | translate }}</ion-label>
      <ion-radio [value]="profileItem.Sex"></ion-radio>
    </ion-item>
...
</ion-radio-group>

changeVal(ev){
    console.log('your value: ', ev.detail.value);
}

<template>
  <ion-list>
    <ion-radio-group v-model="mode" >
      <ion-list-header>
        <ion-label>Appearance</ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>Dark</ion-label>
        <ion-radio slot="start" value="dark"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>White</ion-label>
        <ion-radio slot="start" value="white"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonList,IonListHeader,
  IonRadio,
  IonRadioGroup,
  IonLabel,
  IonItem,
} from "@ionic/vue";
import { ref } from "vue";
export default {
  name: "Settings",
  components: { IonList,IonListHeader, IonRadio, IonRadioGroup, IonLabel, IonItem },
  setup() {
    let mode = ref("white");

    // 
    setInterval(() => {
      console.log('selected mode : ',mode.value);
    }, 2000);
    return { mode };
  },
};
</script>