如何将单选按钮值绑定到模型

Question

enter code here我正在做一个多项选择的小测验，如何通过一组单选按钮绑定用户选择的选项，console.log(selectedOp) 给出了一个未定义的值，请有人给我一个解决方案 home.html

<ion-list>
      <ion-radio-group radio-group [(ngModel)] = "selectedOp">
        <ion-list-header>
          <ion-label >Q{{name?.num }}: {{name?.detail}}</ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label>{{name?.optionA}}</ion-label>
         <ion-radio slot="start" name= "option" [value]="A" ></ion-radio>
         </ion-item>
        <ion-item>
          <ion-label>{{name?.optionB}}</ion-label>
          <ion-radio slot="start" name= "option" [value]="B"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>{{name?.optionC}}</ion-label>
          <ion-radio slot="start" name= "option" [value]="C"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>{{name?.optionD}}</ion-label>
          <ion-radio slot="start" name= "option" [value]="D"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>

home.ts 

export class HomePage {
  [x: string]: any;
  question: any;
  state: any = 0;
  score: any = 0;
  selectedOp: any;
  name: any;

  constructor() {
    this.timeOut();
    this.question = DB.questions;
    this.name = this.question[0];
    console.log(this.selectedOp);

  }`

enter code here

`

Answer 1

您的绑定实际上是正确的，但是您在构造函数中记录 selectedOp 的值是错误的，因为显然在组件初始化时 selectedOp 的值是未定义的并且您记录了它。

检查单选组值的一种方法是在元素上添加一个事件处理程序，例如

// .html
<ion-radio-group radio-group (ionChange)="onOpChange($event)" [(ngModel)] = "selectedOp">...</ion-radio-group>

// .ts
onOpChange($event) {
    console.log($event); // logs the event obj
    console.log($event.target.value); // logs the selected value

}

如何将单选按钮值绑定到模型

How to bind radio button value to the Model

binding

radiobuttonlist

radio-group

ionic-framework

angular