ラジオボタンから値を得ることができませんionic 3

Question

私はイオンを使って複数の選択肢のクイズアプリを作ろうとしていますが、スコアを得る方法を混乱させるので、ラジオボタンで選択した値をスコアにすることができます。しかし、私はデータベースからのngForループでionicで選択されたラジオボタンから値を取得する方法を理解していません。

これは

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

私のhtmlファイルであり、この私のTSが10の質問があるので、私はそれぞれの質問から値を取得する必要があり、例えば、番号1のための私のデータベースでは

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

} 

を提出私はaを選び、bは2番、... 10番はdを選ぶ。そして、私は上記のすべての値を得て得点を出します。

* ngForループを使用してラジオボタンで値を選択する手助けがありますか？ plsは

Answer 1

は

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

とあなたのHTMLにあることがthis.items = data;のコードを微調整するので、同様に、この値に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>

あなたのc小娘は、次の関数を追加：

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

それだ、私はあなたには、いくつかの特定の条件に渡され、選択した各解答を計算および/または正解

ために比重を返したい場合はあなたのためにそれを微調整する準備ができてよ