Question

我试图用离子进行多项选择测验应用，但我混淆了如何得分，我想我可以通过单选按钮获得所选值来得分。但我不明白如何通过数据库中的ngFor循环从离子中的选定单选按钮获取值。

这是我的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循环帮助我在单选按钮中获取所选值吗？ PLS

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
}

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

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

1 个答案: