获取选定的单选按钮值，on (ionChange) in radio-group , ionic2

Question

我想在 Ionic2 的单选组中的 (ionChange) 事件中获取选定的单选按钮值。

我的Html密码是

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer(i)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

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

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

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

如何在 mcqQuesiton() 中获取离子无线电值（离子变化）。

我在单个页面上有数字或单选组，因为它是多项选择题页面。

Answer 1

您可以使用 <ion-radio> 的 ionSelect 事件来传递值。

...
  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1" (ionSelect)="mcqAnswer(i,1)"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2" (ionSelect)="mcqAnswer(i,2)"></ion-radio>
  </ion-item>
...

在您的打字稿 (.ts) 文件中，它将类似于

mcqAnswer(questionID,answer){
...
}

Answer 2

您可以将 $event 传递给您的 onChange 方法。例如

在你的html中：

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

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

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

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

在你的打字稿中：

function mcqAnswer(value)
{
   console.log(value);
}

Answer 3

选择类别

   <ion-item *ngFor="let category of subcategories; let index=index;">
      <ion-label>{{category}}</ion-label>
      <ion-radio [value]="category"></ion-radio>
    </ion-item>

在您的 .ts 文件中：

selectedValue($event){
  console.log($event);
}

Answer 4

有两种方法。一种是使用ionSelect.below是一个例子

  <ion-item >
    <ion-label><h2>You entered:</h2>
    </ion-label>
    <ion-radio color="success"  slot="start" [value]="enteredAddress" (ionSelect)="populateSuggestion($event)"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label><h2>Suggested Address:</h2>
    </ion-label>
    <ion-radio  color="success" slot="start" [value]="suggestedAddress" (ionSelect)="populateSuggestion($event)" ></ion-radio>
  </ion-item>

</ion-radio-group>

方式 2 是使用 ViewChild 访问本机 DOM 元素。 html: TS： @ViewChild('radio', { read: ElementRef, static: false }) radio: ElementRef;

Answer 5

ionic v6：使用 ngmodel

<ion-radio-group  [(ngModel)]="McAns" *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

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

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

on (ionChange)="mcqAnswer($event)"

 mcqAnswer(eve) {
    console.log(this.McAns)
  }

获取选定的单选按钮值，on (ionChange) in radio-group , ionic2

Getting selected radio button value, on (ionChange) in radio-group , ionic2

ionic2