【Angular2】AnswerSheet组件设计

引言

在【Angular2】试卷整体设计中说到AnswerSheet组件的卡功能是可以显示用户对每道题答题状态，点击答题卡可以定位到相应题目；

同时，这里也有一些组件交互的问题需要讨论

 

功能要求

1.显示用户对每道题答题状态；
2.点击答题卡可以定位到相应题目；

 

代码说明

html code

<div id="answer_sheet">  <div class="sidebar_title">答题卡</div>  <div *ngIf="exampaper">    <div *ngFor="let qt of exampaper.paperQuestionTypeList; let i=index">      <div class="cards">        <h4>{{USN[i]+qt.questionTypeName}}</h4>        <div *ngFor="let qm of qt.questionMainList; let j=index">          <!-- 题干没有子题干 -->          <!-- <div id="{{qm.id}}" class="card" (click)="locateQuestion($event.target)">{{j+1}}</div> -->          <!-- 题干有子题干，进行判断 -->          <div *ngIf="qm.questionSubList[0]">            <div id="{{qm.id}}" class="card" (click)="locateQuestion($event.target)">{{j+1}}</div>          </div>          <div *ngIf="!qm.questionSubList[0]">            <div *ngFor="let qs of qm.smallquestionMainList; let k=index">              <div id="{{qs.id}}" class="card" (click)="locateQuestion($event.target)">{{k+1}}</div>            </div>          </div>        </div>        <div style="clear:both;"></div>      </div>      <br/>    </div>  </div></div>

html 说明

这里就是对数据的循环处理，需要注意的数据中的子题干问题，因为答题卡也是通过试卷实体来遍历出要显示的内容；

这里简单说一下试卷实体，包括题型实体集合，题型集合中包括题干实体集合，题干实体包括选项实体集合和子题干实体集合，子题干实体集合又包括子题干实体集合和选项集合…所以遍历的时候需要依自己数据类型而定；

---

ts code

  @Input() exampaper: ExamPaperModel;  @Input() updatedAnswer: Answer;  USN = UpSerialNumber; //大题题号（汉字）  /* 监测父组件提供输入值的变化 */  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {    for (let propName in changes) {      let changedProp = changes[propName];      let answer = <Answer>changedProp.currentValue;      if (!changedProp.isFirstChange()) {        let el = document.getElementById(answer.questionMainId);        if(answer.done){          if (el != null) { el.setAttribute("class", "card_done"); }        }else{          if (el != null) { el.setAttribute("class", "card"); }        }      }     }  }  /* 定位到问题位置 */  locateQuestion(el: Element){    let questionid: string = el.getAttribute("id");    let questiondiv = document.getElementsByName(questionid);    questiondiv[0].scrollIntoView(true);//true：元素顶部与窗口顶部齐平；false：元素底部与窗口底部齐平  }

ts 说明

如注释说明，通过simplechange机制来实现子组件监测父组件输入值得变化；

这里值得一提的是如果传入的是一个实体，simplechange监测的应该是实体的地址，如果是同一个实体，只改变实体里面的属性，是感知不到变化的，所以每次提交实体需要new一个新的；

 

小结

AnswerSheet组件就是对SimpleChange的一个应用，涉及到了组件之间的交互；
同时，需要设置好元素的id，进行相应的操作