angular2——模态框使用记录

  接触angular有一段时间，一直
try{
赶项目改bug
}catch(e){
缺乏理论性学习
}
像签名所说博客主要是个人学习笔记，过程中用了刚鹏、我们组长李鑫超的很多东西，先谢谢两位大牛的热心帮助；我也在学习过程中，有的东西说的不是很深入，不断提高，不断努力，也欢迎大家提出宝贵意见，一起进步，下面这张图主要说一下编辑那个按钮，说这个之前需要先厚着脸皮说一下表格（算是窃取刚鹏的劳动成果吗）：

表格是刚鹏封装的，融合了很多功能，也是被我们引用最多的一个组件，足见大神的厉害程度
刚鹏的表格我这块是这么用的

  "btnAdd1" [editButton]="btnEdit1" [deleteButton]="btnDelete1" [title]="title1" [sizeList]="sizeList1"
    [paging]="paging1" [buttonList]="buttonList" [pageSize]="pageSize1" [page]="page1" [total]="total1" [data]="examData" [arr]="arrbutes1"
    [isLink]="isLink1" (linkClickEmitData)="clickExamName($event)" (operat)="operatData($event,editModal)" (changepage)="changepage($event)"
    (deletesEmit)="deleteExamination($event)" (editData)="edit($event,editModal)" (addOpen)="addExam()">
  

  命名不是很规范哈（懒得改了），表格里面分页、链接不是本篇的内容，聚焦于编辑一列，通过    html 中 [buttonList]=”buttonList”，
以及 ts中    buttonList = [“编辑”, “删除”];    达到效果
点击“编辑”时触发     (operat)=”operatData($event,editModal)” 中的事件；

(operat)="operatData($event,editModal)"

参数第一个$event具体是什么，需要在ts中console.log出来看一下，第二个editModel个人感觉类似是模态框的别名、通过这个参数将整个模态框传给了ts中的方法，这样也实现了双向绑定，模态框的修改界面的表格也相应的改动了，在ts中写这个方法的实现：

//两种情况，1、如果点击的是删除按钮，2、如果点击的是编辑按钮
operatData(eventObj: any, editModal: any) {
    switch (eventObj.element.innerText) {
      case "删除":
        this.confirmationService.confirm({
          message: '你确定要删除吗?',
          accept: () => {
            this.deleteSingleDate(eventObj.data);
          }
        });
        break;
      case "编辑":
        this.edit(editModal, eventObj.data);
    }
  }

通过console.log(eventObj)

展开element:a里面有很多东西；
如果是编辑，调用edit方法

 //将数据存入实体
  private ExaminationModel = new ExaminationModel();
  timeShow = new Date();//当前时刻
  termNameForFirstShow: string;//显示试卷原有的学年学期名称
  paperOrTemplateNameForFirstShow: string;//显示试卷或模板的名称（该题原有的数据）
  //点击编辑按钮(单击编辑考试) editStudentModel为看出框的实体
  edit(editStudentModel: HTMLElement, index: string) {
    //查询学年学期
    this.getTerm();
    //查询考试类型
    this.getPaperType();
    //用于弹框数据显示，将待编辑的index行信息赋给模态框
    this.ExaminationModel = this.examData[index];
    //为时间赋值，这里有一个格式转换，将日期转换为常用格式
    this.ExaminationModel.startingDate = new Date(this.ExaminationModel.startingDate);
    this.ExaminationModel.endingDate = new Date(this.ExaminationModel.endingDate);
    //模态框初始化时学期下拉框默认显示试卷原有的学年学期名称
    this.termNameForFirstShow = this.ExaminationModel.termName;
    //模态框初始化时显示试卷或模板的名称（该题原有的数据）
    this.paperOrTemplateNameForFirstShow = this.ExaminationModel.paperOrTemplateName;
    //应该是不需要赋值的，以防万一；模板或试卷id及名称
    this.ExaminationModel.paperOrTemplateId = this.examData[index].paperOrTemplateId;
    this.ExaminationModel.paperOrTemplateName = this.examData[index].paperOrTemplateName;
    //模态框显示，不隐藏
    editStudentModel.style.visibility = 'visible';
  }

学期学期、模板/试卷名称时一个select下拉框，这里展示一下学年学期吧：

<div class="form-group">
            <label class="col-sm-3 control-label">学年学期：label>
            <div class="col-sm-9">
              <select class="form-control" name="term" id="termId" (change)="termChange($event.target.value)" required>
                <option >{{termNameForFirstShow}}option>
                <option *ngFor="let option of TermModelList" [value]="option.code">{{option.name}}option>
              select>
            div>
          div>

当框中的值改变时，调用

  //学年学期的改变事件
  termChange(termCode) {
  //改变学期学期的值
    this.ExaminationModel.schoolYearId = termCode;
    //令原来的默认值为空
    this.termNameForFirstShow = "";
  };

模板/试卷名称这里我弄了一段时间，这个下篇博客单独写一下吧；
日期转换用到之前博客挺简单的，多总结多写博客，以后遇到问题了直接翻博客，省时省力，这也是我想记录这次前端历程的原因之一，话写回来，表格编辑完，提交：
form表格：

  
  <div #editModal class="modal-dialog" (click)="draggable()" draggable="true" style="visibility:hidden;position:absolute;left:30%;top:20% ">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeEidt(editModal)">X
        button>
        <h4 class="modal-title">
          编辑考试
        h4>
      div>
      <form role="form" class="form-horizontal" #f="ngForm" (ngSubmit)="onSubmit(f.value,editModal)">
        <div class="modal-body">
          <div class="form-group">
            <label class="col-sm-3 control-label">考试名称：label>
            <div class="col-sm-9">
              <input type="text" class="form-control" placeholder="如：2017级英语国家概况" name="examinationname" [(ngModel)]="ExaminationModel.examinationName">
            div>
          div>

          <div class="form-group">
            <label class="col-sm-3 control-label">试卷类型：label>
            <div class="col-sm-9">
              <div class="col-sm-3" *ngFor="let ef of paperTypeModel" style="width:100px;">
                <input name='paperType' type="radio" id="ef.id" #type (click)="selectPaperType(ef.id)" /> {{ef.dictionaryName}}
              div>
            div>
          div>

          <div class="form-group">
            <label class="col-sm-3 control-label" style="margin-top:-0.7%">进行选择：label>
            <div class="col-sm-5">
              <input name="paperOrTemp" type="radio" (click)="selectTempType()" style="margin-left:6.5%" />选择模板
              <input name="paperOrTemp" type="radio" (click)="selectPaper()" style="margin-left:16%" />选择试卷
            div>
          div>

          <div class="form-group">
            <label class="col-sm-3 control-label" id="paperNameId">模板/试卷label>
            <div class="col-sm-9">
              <select class="form-control"  (change)="tempOrPaperChange($event.target.value)">
                <option value="">{{paperOrTemplateNameForFirstShow}}option>
                <option *ngFor="let templType of templateTypeList">{{templType.name}}option>
              select>
            div>
          div>
        div>

        <div class="modal-footer">
          <button type="button" id="closeBtnId" class="btn btn-default" (click)="closeEidt(editModal)">关闭button>
          <button type="submit" class="btn btn-primary">提交更改button>
        div>
      form>
    div>
  div>

ts实现：

 //提交修改的数据
  onSubmit(form: any, editmodal: HTMLElement): void {
    if (this.ExaminationModel.id == null || this.ExaminationModel.id == '') {
      this.message = "该考试出现错误，请从‘编辑’按钮开始 重新操作";
      this.display = true;
      editmodal.style.visibility = 'hidden';
    } else {
      let resultNull = this.judgeNull();
      if (!resultNull) { //界面 学期 试卷类型 为空
        return;
      } else {
        if (this.ExaminationModel.endingDate != null || this.ExaminationModel.startingDate != null) {
          this.confirmationService.confirm({
            message: '考试时间为:' + this.convertToDate(this.ExaminationModel.startingDate) + '---' + this.convertToDate(this.ExaminationModel.endingDate),
            accept: () => {
              //将修改后的表单提交
              let subMitResult = 'examinationEvaluation-web/examManager/updateExam';
              let body = JSON.stringify(this.ExaminationModel);
              this.http.post(subMitResult, body).subscribe(
                res => {
                  if (res.json().code == "0000") {
                    this.display = true;
                    this.message = res.json().message;
                    editmodal.style.visibility = 'hidden';
                    //刷新界面，重新赋值
                    let url = `${this.url}/${this.page1}/${this.pageSize1}`;
                    this.getExamInfo(url);//提交修改数据 因为一些字段没有双向绑定
                  } else {
                    //提示错误信息，保持编辑状态
                    this.display = true;
                    this.message = res.json().message;
                  }
                }
              )
            }
          });
        } else {
          this.message = "请选择开始时间、结束时间";
          this.display = true;
          return;
        }
      }
    };
  }

加了一些非空及时间的判断，到这里模态框想写的差不多了，刚才看了一下，表格的标题是怎么填上去的呐？

//表格相关，标题、标题对应的实体字段：这需要和后端实体字段一一对应
  title1 = ['考试名称', '课程名称', '开课学院', '考试时间', '学年学期', '试卷或模板', '总容量'];
  arrbutes1 = ["examinationName", "courseName", "institutionName", "examTime", 'termName', "paperOrTemplateName", "capacity"];
  isLink1 = [true, true, true, true, false, false, false];//是否有链接

小结：
    这篇博客，因为前段没怎么学习理论知识，目前多是一些记录、表面的东西，可是说没什么技术含量，记码生活、不断提高；近段时间事情杂而且多，加上本身的小暴脾气，所以说话有些冲，挺抱歉的，有很多待提高的地方，谢谢大家的包容和帮助。
附：
operat以及（）中的东西是表格中固有的事件，几乎满足了表格使用过程中的需求