无法从单选按钮 ionic 3 中获取价值

Question

我正在尝试使用 ionic 制作多项选择测验应用程序，但我对如何获得分数感到困惑，我想我可以在单选按钮中获得选定的值来获得分数。但我不明白如何使用数据库中的 ngFor 循环从 ionic 中的选定单选按钮中获取值。

这是我的 html 文件

<ion-header>

  <ion-navbar>
    <ion-title>Quiz <ion-icon name="more" (click)="showMore($event)" style="float:right; cursor:pointer; width:20px;"></ion-icon></ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div *ngFor="let item of items">
    <p class="pertanyaan">{{ item.pertanyaan }} </p><br>
    <form>
      <div>
          <input type="radio" name="jwb1" id="jwb1" value="A" [(ngModel)]="jawaban"/>
          <label for="jwb1">{{ item.jawaban1 }}</label>
      </div>
      <div>
          <input type="radio" name="jwb1" id="jwb2" value="B" [(ngModel)]="jawaban"/>
          <label for="jwb2">{{ item.jawaban2 }}</label>
      </div>
      <div>
          <input type="radio" name="jwb1" id="jwb3" value="C" [(ngModel)]="jawaban"/>
          <label for="jwb3">{{ item.jawaban3 }}</label>
      </div>
      <div>
          <input type="radio" name="jwb1" id="jwb4" value="D" [(ngModel)]="jawaban"/>
          <label for="jwb4">{{ item.jawaban4 }}</label>
      </div>

      <br>
      <br>
      <br>
      <br>
      <br>
    </form>
  </div>

  <button ion-button name="submit" ng-model="submit" (click)="konfirmasiKirim()">Submit</button>

</ion-content>

这是我的 ts 文件

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { NavParams } from 'ionic-angular/navigation/nav-params';
import { AlertController } from 'ionic-angular/components/alert/alert-controller';


@IonicPage()
@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.html',
})
export class QuizPage {
  public username:any;
  public jawaban:any;
  public items : any = [];
  constructor(public navCtrl: NavController,
              public http   : Http,
              public navParams: NavParams,
              public alertCtrl: AlertController)
  {

  }

  ionViewDidLoad() {

    this.username = this.navParams.get('username');
  }


  ionViewWillEnter()
  {
     this.load();
  }

  // Retrieve the JSON encoded data from the remote server
  // Using Angular's Http class and an Observable - then
  // assign this to the items array for rendering to the HTML template
  load()
  {
     this.http.get('https://apifisika.000webhostapp.com')
     .map(res => res.json())
     .subscribe(data =>
     {
        this.items = data;
     });
  }

  konfirmasiKirim()
  {
    let confirm = this.alertCtrl.create({
      title: 'Kirim Jawaban?',
      message: 'Hai '+this.username+' sudah yakin untuk kirim jawaban?',
      buttons: [
        {
          text: 'Cek kembali',
          handler: () => {
            console.log('mengko');
          }
        },
        {
          text: 'Kirim Jawaban',
          handler: () => {
            // this.navCtrl.push(QuizPage);
            alert(this.jawaban);
          }
        }
      ]
    });
    confirm.present();
  }

}

在我的数据库中有 10 个问题，所以我需要从每个问题中获取价值，例如数字 1 我选择 a，数字 2 b，...数字 10 我选择 d。然后我得到上面所有的值来打分。

有人可以帮助我使用 *ngFor 循环在单选按钮中获取选定的值吗？请

Answer 1

将this.items = data;的代码调整为

this.items.forEach(item => {
   item.isSelected = false;
});

并在您的 HTML 中对这个值执行 ngModel，如下所示：

<form>
<div *ngFor="let item of items">
    <p class="pertanyaan">{{ item.pertanyaan }} </p>
     <div>
          <input type="radio" name="jwb{{ item.jawaban1 }}" id="jwb{{ item.jawaban1 }}"  [(ngModel)]="item.isSelected"/>
          <label for="jwb1">{{ item.jawaban1 }}</label>
     </div>   
</div>

</form>

并将结果显示为总分：

<h3>{{ totalSelected() }}</h3>

并在你的类中的 ts 中添加以下函数：

totalSelected(){
   return this.items.filter(item => return item.isSelected).length
}

就是这样，如果您想计算在某些特定条件下传递的每个选定答案和/或为正确答案返回特定权重，我已准备好为您调整它