【Angular2】CheckBox获取值的两种方式

前言

因为项目中需要用到CheckBox向后台提交数据
最开始设定的是学生选择什么就直接把答案合成一个字符串传到后端
但是需要回显学生答案，后端返回的json数据中答案是一个处理后的字符串，无法进行判断
所以采用数组形式答案，可以在HTML中利用模板表达式进行循环遍历判断，从而实现答案回显的功能

 

方式一 _ 答案合成字符串

html code

<div>
  <p>{{question.questionMainOrder + ". " + question.questionContent}}</p>
  <div *ngFor="let option of question.questionSubList;let i=index">
    <input type="checkbox" name="{{option.questionMainId}}" value="{{option.optionsContent}}" id="{{option.optionOrder}}"
    (click)="updateAnswer($event.target,$event.target.checked, $event.target.value)">    
    {{alphabet[i]}}{{'. '+option.optionsContent}}
  </div>
</div>

ts code

private options: Array<string> = [];//用户的答案选项（在方法外声明，否则本题刚选择答案会消失）

updateAnswer(el: Element, checked: boolean, value: string) {
    //获得用户的答案
    var index: number = this.options.indexOf(value);
    if (checked) {
      if (index < 0) {
        this.options.push(value+"|");
      }
    } else {
      if (index > -1) {
        this.options = this.options.filter((ele, index) => {
          return ele != value;
        })
      }
    }

    //将答案合成字符串，用分隔符分开
    let strInput: string = "";
    for (var i = 0; i < this.question.questionSubList.length; i++) {
      if (this.inputs[i] == "" || this.inputs.length < this.question.questionSubList.length) { answer.done = false; }
      if (this.inputs[i] != null) {
        strInput = strInput + this.inputs[i] + "|";
      } else {
        strInput = strInput + "|";
      }
    }

    //处理用户答案
    if (this.options.length == 0) {
      answer.studentAnswer = "";
      answer.done = false;
    } else {
      let strChecked: string = "";
      this.options.forEach((val, idx, array) => {
        strChecked = strChecked + val;
      });
      answer.studentAnswer = strChecked;
      answer.done = true;
    }

    //传递用户的答案
    this.updatedAnswer.emit(answer);
    this.updateStudentAnswerToBackend(answer);

}

 

方式二 _ 答案转为数组

html code

<div>
  <p>{{question.questionMainOrder + ". " + question.questionContent}}</p>
  <div *ngFor="let option of question.questionSubList;let i=index">
    <input type="checkbox" name="{{option.questionMainId}}" value="{{option.optionsContent}}" id="{{option.optionOrder}}"
    checked="{{option.optionsContent==question.studentAnswerArray[i] ? 'checked' : ''}}"
    (click)="updateAnswer($event.target,$event.target.checked, $event.target.value)">    
    {{alphabet[i]}}{{'. '+option.optionsContent}}
  </div>
</div>

ts code

private options: Array<string> = [];//用户的答案输入（在方法外声明，否则本题刚选择答案会消失）

updateAnswer(el: Element, checked: boolean, value: string) {
    //用户的答案(在方法内声明，每次提交为新答案实体，simplechange才会识别)
    let answer: Answer = new Answer;
    //声明数组
    answer.studentAnswerArray=[];

    //获得题目id
    let questionid: string = el.getAttribute("name");
    //获得选项id
    let optionid:number =Number(el.getAttribute("id"));
    if(checked==true){
      this.options[optionid-1]=value;
    }else{
      this.options[optionid-1]="";
    }
    //处理选项结果
    for (var i = 0; i < this.question.questionSubList.length; i++) {
      if(this.options[i]=="" || this.options[i]==null){
        this.options[i]=""
      }
    }


    //处理用户答案
    answer.studentId=localStorage.getItem("studentCode");
    answer.paperId=this.paperId;
    answer.questionTypeId=this.questionTypeId;
    answer.questionMainId=questionid;
    answer.studentAnswerArray=this.options;
    answer.done=false;
    for(var i=0;i<this.options.length;i++){
      if(this.options[i]=="" || this.options[i]==null){
      }else{
        answer.done=true;
      }
    }
    console.log("question-checkbox-answer--"+answer);

    //传递用户的答案
    this.updatedAnswer.emit(answer);
    this.updateStudentAnswerToBackend(answer);
  }

 

小结

根据不同的需求采用不同的实现，需要对开发语言有一个很好的了解
这样遇到问题才会提出一些解决方案，前后端共同完善
最后，尽可能以最小的代价做修改