【Angular2】ExamPaper组件设计
引言
在【Angular2】试卷整体设计中说到ExamPaper组件成为容器，接收后端数据，根据数据的不同挑选不同题型组件来渲染数据，同时它也可以接受各个题型组件返回的数据
功能要求
1.作为各个题型组件的容器，传递消息；
2.接收数据，并根据数据的不同选择不同的组件渲染数据；
代码说明
html code
<div class="question_type" *ngFor="let qt of exampaper?.paperQuestionTypeList; let j=index">
<div class="question_type_name">{{USN[j]+qt.questionTypeName}}div>
<div>{{qt.questionTypeDesc}}div>
<div *ngFor="let q of qt.questionMainList; let i=index" [ngSwitch]="qt.questionTypeId">
<div *ngFor="let qtl of questionTypeList; let k=index">
<div *ngIf="qt.questionTypeId==qtl.id" [ngSwitch]="qtl.questionCode">
<div *ngSwitchCase="0">
<question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-input>
div>
<div *ngSwitchCase="1">
<question-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-radio>
div>
<div *ngSwitchCase="2">
<question-checkbox [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-checkbox>
div>
<div *ngSwitchCase="3">
<question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-input>
div>
<div *ngSwitchCase="4">
<question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-sub-radio>
div>
<div *ngSwitchCase="5">
<question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-input>
div>
<div *ngSwitchCase="6">
<question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-sub-radio>
div>
<div *ngSwitchCase="7">
<question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-textarea>
div>
<div *ngSwitchCase="8">
<question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-textarea>
div>
<div *ngSwitchCase="9">
<question-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-radio>
div>
<div *ngSwitchCase="10">
<question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-sub-radio>
div>
<div *ngSwitchCase="11">
<question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-textarea>
div>
<div *ngSwitchCase="11">
<question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id"
(updatedAnswer)="changeAnswerSheet($event)">question-textarea>
div>
div>
div>
div>
div>html 说明
可以直观的看到，是通过ngSwitch来选择不同的题型组件来渲染不同的题目；
这里有两重循环，一个是题目的循环，一个题型的循环，在这双重循环下找到对应的组件；
因为题型id可能会变，在数据中的题型id和后端设计的题型id都在变化，所以这里用双重循环来比对，唯一确定的是题型code，以此来选择相应组件；
ts code
@Input() exampaper: ExamPaperModel; //试卷实体
@Output() updateAnswer = new EventEmitter(); //更新的答案
public questionTypeList: PaperQuestionTypeModel[];//题型集合
USN = UpSerialNumber; //大题题号（汉字）
private answers: Answer[];
ngOnInit() {
this.getQuestionTypeList();
}
/* 获取题型列表 */
getQuestionTypeList() {
let url: string = "examinationEvaluation-web/onlineExam/selectQuestionTypeId" + this.authGuardService.getTicket();
this.http.get(url).subscribe(
res => {
this.questionTypeList = res.json().data;
}
);
}
//改变答题卡
changeAnswerSheet(updatedAnswer: Answer) {
this.updateAnswer.emit(updatedAnswer);
} ts 说明
ts就相对简单了，主要就是获取数据供html显示；
同时接收到各个组件传回来的数据，然后再向上传递；
小结
ExamPaper组件的难点就是后端的约定，前期的数据写死到后面的写活，修改了几次数据格式
这里的经验教训就是，纯map格式的数据在前端不是很容易使用
另外，就是多重循环和switch语句了，熟悉了就好了