Question

我在下面有一个代码：

<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不变。
如何获得离子无线电基标签中的选定值？

Answer 1

您还可以将ion-select与ionChange事件一起使用：

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

Answer 2

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

在打字稿中

    function checkValue(value)
    { //your code }

Answer 3

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

// page.ts

radioValue;

constructor(){}

showValue(){
  console.log(this.radioValue);
}

Answer 4

在您的组件中：

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

要访问值：this.inputValue.nativeElement.value

在您的html中：

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

Answer 5

使用 ionChange 事件
文档：https://ionicframework.com/docs/api/radio-group#events

在您的模板中：

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

在您的.ts文件中：

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

Answer 6

您只需要在 v-model="" 组件中使用 <ion-radio-group>。

这里是 ionic vue 3 radio group 示例 (2021)

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

获取离子4中离子-放射性基团标签的选定值

6 个答案: