如何在角度 2 中获得复选框响应？答案

【问题标题】：how to get chechkbox response in angular 2?如何在角度 2 中获得复选框响应？
【发布时间】：2017-08-11 11:50:30
【问题描述】：

here is the quiz.component.html file.

选项值来自服务。我想在这里使用复选框保存用户响应。当他单击保存按钮时。请帮帮我？

<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> &nbsp; {{question.ques}}
                               </p>
           <form [(ngSubmit)]=saveResponse() >                    
           <ol type="a">
               <li> <input type="checkbox" #op1 value={{question.op1}} >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;{{question.op1}}</li>
               <li><input type="checkbox" #op2  value={{question.op2}} >&nbsp; &nbsp;&nbsp;    &nbsp;{{question.op2}}</li>
               <li><input type="checkbox" #op3  value={{question.op3}} >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{question.op3}}</li>
               <li><input type="checkbox" #op4  value={{question.op4}} >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{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);
    // }
    }

【问题讨论】：

标签： angular checkbox angular2-forms

【解决方案1】：

最简单的方法通常是使用ngModel

<input type="checkbox" [(ngModel)]="question.op1" name="op1"

用于输入元素和模型状态之间的双向绑定。

【讨论】：