【angular】考试卷子详情

因为数据库中数据问题，截取空白页不如上盘原型图：

主体代码：

<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">
          <app-subjective-input [question]="q" [exampaperscore]="exampaper.paperscore" (votedscore)="acceptscore($event)"></app-subjective-input>

 <!-- 1 单选题 其他题型大体和填空题类似 -->
 ……
 </div></div></div>

通过[]将question、paperscore传给子组件，通过（）将子组件中各题的分数传出来
子组件：

@Input() question:QuestionMainModel; //题干实体
 @Input() exampaperscore:string;//试卷得分
 @Output() votedscore = new EventEmitter();

……
试卷分数=之前试卷总分-当前题本来的分数+当前题修改后的分数
this.exampaperscore = (parseFloat(this.exampaperscore) - parseFloat(this.currentQuestionscore) + parseFloat(this.question.stuscore)).toString();

this.votedscore.emit(this.exampaperscore);这里将修改后的分数送给父组件用于显示，也用于和试卷满分比较

修改一道题便提交一道题的分数
html中回显学生答案：

<div class="question_input_div"> <!-- 显示题干题号、题的描述及分数 --> <p> <strong>{{question.questionMainOrder + ". " + question.questionContent}}</strong> <span *ngIf="question.score">（{{question.score}}分）</span> </p> <!-- 该题是否有图片，有则显示，后台fastDFS --> <div *ngIf="question.imageName"> <img class="question_img" src="{{question.imageId}}"> </div> <!-- 遍历选项，是否有学生答案，有显示没有提示 --> <div class="question_input" *ngFor="let option of question.questionSubEntityList;let i=index"></div> <div> <a *ngIf="!question.studentAnswer ; else showAnswer">您未作答此题</a> <ng-template #showAnswer> <strong>您的答案是：</strong> <label style='font-weight:normal;'>{{question.studentAnswer}}</label> </ng-template> <br/> 正确答案如下: <a style="font-weight:normal;color:red">{{question.answer}}</a> </div> <div> 是否答对： <a *ngIf=" (question.stuscore | toNumber) > 0 ; else elseBlock"> <strong style="color:red">√</strong> &nbsp; </a> <ng-template #elseBlock> <strong style="color:red">X</strong> </ng-template> <input type="text" maxlength="2" id="scoreId" style="width:6%" (change)="submitscore($event.target.value)" [(ngModel)]="question.stuscore" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" /> <label class="scoreSytle">分</label> </div> </div> <!-- 出现问题之后弹框提示 --> <p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true"> <p style="text-align:center">{{message}}</p> <p-footer> <button type="button" pButton (click)="display=false" label="确定"></button> </p-footer> </p-dialog> <br/>

过程中涉及到了字符串的截取：
http://www.jb51.cc/article/p-qvwahojt-brz.html
input和output：很重要
http://www.jb51.cc/article/p-sxnamfaa-bob.html 后记：想截取那篇文出来的效果是平行的，不太好看，所以把我们组长截取的沾出来写一篇博客吧

【angular】考试卷子详情

相关文章