here is the quiz.component.html file.
option values comes from service. i want to save user response using checkboxes here .when he click on save button . kindly help me out?
<html>
<div class="jumbotron">
<div class="container">
<div class="page-header">
<h1>Quiz </h1>
<h4> Solve Questions Here</h4>
</div>
<div *ngFor="let question of questions; let i = index">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Quiz</h3>
</div>
<div class="panel-body">
<p>
<span> .</span>
</p>
<form [(ngSubmit)]=saveResponse() >
<ol type="a">
<li> <input type="checkbox" #op1 value= > </li>
<li><input type="checkbox" #op2 value= > </li>
<li><input type="checkbox" #op3 value= > </li>
<li><input type="checkbox" #op4 value= > </li>
</ol>
<ul class="pager">
<li><button type="button"> Prev</button></li>
<li><button type="button" > Save </button></li>
<li><button type="button" > Next</button></li>
</ul>
</form>
</div>
<br>
<br>
</div>
</div>
</div>
</div>
</html>
Here is the quiz.component.ts file... Here i am trying to build a function that takes checkboxes values but not able to correctly get values when checkbox is checked .
import { Component, OnInit } from '@angular/core';
import { QuizService } from '../../services/quiz.service'
import { ActivatedRoute,Router } from '@angular/router';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'quiz',
templateUrl: 'quiz.component.html',
})
export class QuizComponent implements OnInit {
questions: String[];
// submitChoices:{}
// optValue:String[];
// pager = {
// index: 0,
// size: 1,
// count: 1
// };
constructor(private _quizService: QuizService,private route:ActivatedRoute) {
}
ngOnInit() {
// this._quizService.getQues().subscribe(ques => {
// this.questions = ques;
// // console.log(ques);
// });
this.route.params.switchMap((params) => this._quizService.getQuesByCategory(params['quizType'])).subscribe(q => {
this.questions= q;
});
}
// get filteredQuestions(){
// return (this.questions) ?
// this.questions.slice(this.pager.index,this.pager.index+this.pager.size):[];
// }
// getChoices(value:any,event){
// // if(event.target.checked==true)
// // {
// // this.optValue.push(value);
// // }
// // console.log(this.optValue);
// }
}
Aucun commentaire:
Enregistrer un commentaire