【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"> <!-- 0 填空题 --> <div *ngSwitchCase="0"> <question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-input> </div> <!-- 1 单选题 --> <div *ngSwitchCase="1"> <question-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-radio> </div> <!-- 2 多选题 --> <div *ngSwitchCase="2"> <question-checkbox [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-checkbox> </div> <!-- 3 选词填空 --> <div *ngSwitchCase="3"> <question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-input> </div> <!-- 4 完型填空 --> <div *ngSwitchCase="4"> <question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-sub-radio> </div> <!-- 5 段落匹配 --> <div *ngSwitchCase="5"> <question-input [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-input> </div> <!-- 6 阅读理解 --> <div *ngSwitchCase="6"> <question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-sub-radio> </div> <!-- 7 翻译题 --> <div *ngSwitchCase="7"> <question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-textarea> </div> <!-- 8 作文题 --> <div *ngSwitchCase="8"> <question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-textarea> </div> <!-- 9 判断题 --> <div *ngSwitchCase="9"> <question-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-radio> </div> <!-- 10 阅读题 --> <div *ngSwitchCase="10"> <question-sub-radio [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-sub-radio> </div> <!-- 11 简答题 --> <div *ngSwitchCase="11"> <question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-textarea> </div> <!-- 12 论述题 --> <div *ngSwitchCase="11"> <question-textarea [question]="q" [questionTypeId]="qt.questionTypeId" [paperId]="exampaper.id" (updatedAnswer)="changeAnswerSheet($event)"></question-textarea> </div> <!-- <div *ngSwitchDefault> <question-input [question]="q" (updatedAnswer)="changeAnswerSheet($event)"></question-input> </div> --> </div> </div> </div> </div>

html 说明

可以直观的看到，是通过ngSwitch来选择不同的题型组件来渲染不同的题目；

这里有两重循环，一个是题目的循环，一个题型的循环，在这双重循环下找到对应的组件；

因为题型id可能会变，在数据中的题型id和后端设计的题型id都在变化，所以这里用双重循环来比对，唯一确定的是题型code，以此来选择相应组件；

ts code

@Input() exampaper: ExamPaperModel; //试卷实体
  @Output() updateAnswer = new EventEmitter<Answer>(); //更新的答案
  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语句了，熟悉了就好了