前言

因為專案中需要用到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);
  }

小結

根據不同的需求採用不同的實現，需要對開發語言有一個很好的瞭解
這樣遇到問題才會提出一些解決方案，前後端共同完善
最後，儘可能以最小的代價做修改