0
here is the quiz.component.html file.
オプションの値はサービスに由来します。 私はここにチェックボックスを使用してユーザーの応答を保存したいと思います。親切に私を助けてくれますか？ここで角度2でchechkbox応答を取得する方法は？
<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">{{question.category}} Quiz</h3>
</div>
<div class="panel-body">
<p>
<span> {{i+1}}.</span> {{question.ques}}
</p>
<form [(ngSubmit)]=saveResponse() >
<ol type="a">
<li> <input type="checkbox" #op1 value={{question.op1}} > {{question.op1}}</li>
<li><input type="checkbox" #op2 value={{question.op2}} > {{question.op2}}</li>
<li><input type="checkbox" #op3 value={{question.op3}} > {{question.op3}}</li>
<li><input type="checkbox" #op4 value={{question.op4}} > {{question.op4}}</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>
はquiz.component.tsファイルです... ここで私は、チェックボックスがチェックされている場合、正しく値を取得することができ、チェックボックスの値を取るではなく、機能を構築しようとしています。
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);
// }
}