考试卷子详情

对前端来说我还是个小白，这次这个界面的功能实现也是请了李鑫超还有银铃两位大神来帮忙，最后这篇博客主要是用来记录、整理思路，为自己以后的学习垫个垫脚石；进入正题，先说需求：查看已答过卷子的详细情况，包括题干、学生答案记忆所得分数，目前是用了mock-data假数据，只这个假数据便有2000多行数据，也是辛苦我们组长李鑫超同学了，本来我也想写一个但是……太多了，有现成的、我就了解了一下逻辑然后直接拿过来用，修改自己用到的地方，先看个小图：

11种常见题型（以英语四六级 为例），比如填空题有题型“填空题”，1.  2. 题干；选择题 出来 “选择”题型、1. 2.  题干 还以ABCD等选项；阅读理解比选择题还多了一个子题干：一道阅读理解一般有5个题与之遥相捣乱

<div *ngFor="let qt of exampaper?.paperQuestionTypeList; let j=index">

    <div><strong>{{USN[j]+qt.questionTypeName}}({{qt.questionTypeScore}})分。得分：{{qt.questionTypeScore}}</strong></div>
					      
	<a class="questionTypeDesc">{{qt.questionTypeDesc}}</a>

		<div  *ngFor="let q of qt.questionMainList; let i=index" [ngSwitch]="qt.questionTypeId">
			 <!-- 0.填空题 -->
                         <div *ngSwitchCase="0">
                                <question-input [question]="q"  ></question-input>
                         </div>

利用for循环出题型paperQuestionTypeList （qt），显示该题型的相关描述（根据命名应该不难看出是什么），进入该题型for循环该题型的题干questionMainList（q），然后利用ngSwitch切分模板（组件的模板需要根据某个表达式的不同取值展示不同的片段）和ngSwitchCase（目前是写死的）显示题干信息；USN为大题号enum类型（ts中规定）

 private exampaper:ExamPaperModel;
  private score:string;//考试满分，学生信息处接受该信息
  private studentScore:string;//学生成绩
  USN=UpSerialNumber; //大题题号（汉字）
  private id: string; 

  constructor(private questionnaireService: StudentIndividualScoreService, private activatedRoute: ActivatedRoute, 
  
  private router: Router, private http: Http) {}
  
  ngOnInit() {

    this.id = this.activatedRoute.snapshot.params['id'];
    console.log(this.id);

    if (this.id && this.id !== '0') {

      this.questionnaireService.getExamPaperById(this.id)
        .subscribe(
          
        res => {

          this.exampaper = res['data'];
          this.score=this.exampaper.score;
          this.studentScore=this.exampaper.hopeScore;
          
        }

        );
    }
  }

具体到题干利用question-*选择器：

在ts中接收信息题干信息

@Input() question:QuestionMainModel; //题干实体

在HTML中显示for循环，这里是大题套小题的提醒，如一般一个阅读理解有5个题，每个题有有各自的小题干及选项，下面代码for循环

question.smallquestionMainList（smallquestion）后再循环每个题的小题干smallquestion.questionSubList（option）显示ABCD选

项；alphabet为选项的字母enum类型

<div>
  <p>{{question.questionContent}}</p>
  <div *ngFor="let smallquestion of question.smallquestionMainList;let i=index">
    <p>{{smallquestion.questionMainOrder}}</p>
    <div *ngFor="let option of smallquestion.questionSubList;let i=index">
      <input type="radio" name="{{option.questionMainId}}" value="{{alphabet[i]}}" >      
      {{alphabet[i]}}{{'. '+option.optionsContent}}
    </div>
    您的答案:{{smallquestion.stuAnswer}}
      <span *ngIf="smallquestion.stuAnswer==smallquestion.answer"  class="glyphicon glyphicon-ok"></span>
      <span *ngIf="smallquestion.stuAnswer!=smallquestion.answer"  class="glyphicon glyphicon-remove"></span>
    <br/>
    正确答案:<a style="color:red">{{smallquestion.answer}}</a> 
    <span id="studentAnswerIconId" class="glyphicon "></span>
    <br/>
    得分：{{smallquestion.score}}分
  </div>
</div>

判断对错可以看出用的是ngIf，本来是想在ts中if判断的，但是总是判断第一个，所以组长就改用ngif——所谓条条大路通罗马

在上面的截图上大家有可以看出来，如果没有分数的话，界面显示：得分： 分 ，这样很别捏，所以初始化的时候，虽然方法有点笨：

 ngOnInit() {
    this.question.smallquestionMainList.forEach(item=>{
      if(item.score==null || item.score==""){
        item.score="0"
      }
    })
  }