虽然是Wuli 组长 原创，但是原文链接还是要展出了的http://blog.csdn.net/francis123580/article/details/78528158

引言

在【Angular2】ExamPaper组件设计 中说到ExamPaper组件作为各种题型组件的容器，用于选择和传递数据

目前设计的题型组件有5个，可以适应12种题型，分别为radio、sub-radio、input、checkbox、textarea，具体实现都类似，那么就以最常用的radio组件来说明

功能要求

1.根据数据的类型渲染显示数据；
2.提交用户的填入的数据；
3.将用户的数据回显在原来的位置；

代码说明

html code

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

html 说明

这里把题目id存到了每道题的name中，因为在设计AnswerSheet组件的时候把题目id已经用到了id上了，所以这里只好放在name中，其实应该调换一下，不过改动量比较大，而且当前也能实现；

通过两个ngIf来判断返回的题目中是否有用户答案，如果有则显示；

这里的用户采用数组的形式，无论选择，多选，还是填空，都是数组，因为一道题的答案可能有多个，需要渲染在相应的位置，所以答案之间必须是分开的，采用数组形式就可以解决；

ts code

@Input() question: QuestionMainModel; //题干实体
@Input() paperId: string; //试卷ID
@Input() questionTypeId: string; //题型ID
@Output() updatedAnswer = new EventEmitter<Answer>();
alphabet = Alphabet;
done: boolean = false;updateAnswer(el: Element, value: string) {//用户的答案(在方法内声明，每次提交为新答案实体，simplechange才会识别)let answer: Answer = new Answer;//声明数组answer.studentAnswerArray = [];//获得题目idlet questionid: string = el.getAttribute("name");//处理用户答案answer.studentId = localStorage.getItem("userId");answer.paperId = this.paperId;answer.questionTypeId = this.questionTypeId;answer.questionMainId = questionid;answer.studentAnswerArray[0] = value;answer.done = true;console.log("question-radio-answer--" + answer);//传递用户的答案this.updatedAnswer.emit(answer);this.updateStudentAnswerToBackend(answer);}/* 向后台提交学生答案 */public updateStudentAnswerToBackend(answer: Answer) {let url: string = "examinationEvaluation-web/onlineExam/updatePaperRecordByRecord" + this.authGuardService.getTicket();let body: string = JSON.stringify(answer);this.exampapaerservice.post(url, body).subscribe(res => {if (res.json().data != true) {let ns: number = parseInt(localStorage.getItem("NetWorkState"));ns = ns + 1;localStorage.setItem("NetWorkState", ns.toString());}});}

ts 说明

在实时提交答案的过程中，每次必须是new一个新的实体，不然AnswerSheet中SimpleChange无法监测到；
同时向后端提交答案的时候，需要对返回值进行判断，如果提交失败则修改localstorage中的NetWorkState值，在Information组件中timer会每秒读取这个值，来监测网络状态；

小结

Question组件中的5个题型组件的逻辑是类似的，只是实现方式不太一样；
关于input题型组件很简单，就不加赘述；
checkbox题型组件涉及的难点在 【Angular2】CheckBox获取值的两种方式 中已说明；
textarea题型组件涉及到的难点在格式的保存与显示，在【Angular2】简易版富文本编辑器 和 【Angular2】通过Pipe使用InnerHTML 已经说明