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

  }`

在此处输入代码

`

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

}

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

1 个答案: