《Angular之日期显示错误》

前言：

   伴随着前端框架Angular在公司的深入实践，有很多问题也悄然浮出水面，让方法总比问题多，请随小编瞧瞧日期在前端这么着显示，前端应该作何处理？

正文：

        日期显示不正常呢？

怎么回事呢？

后端没有对日期做处理，返回前端的json数据直接是以毫秒的形式，继而前台接受显示如上图所示。

解决方案

在ts文件里编写日期转换方法：

translateDate(date) {
	  var y = date.getFullYear();
	  var m = date.getMonth() + 1;
	  m = m < 10 ? '0' + m : m;
	  var d = date.getDate();
	  d = d < 10 ? ('0' + d) : d;
	  var a = date.getM
	  return y + '-' + m + '-' + d;
	}

在表格加载时对接收的日期做相应处理：

getData() {
    this.http.get(this.url).subscribe(
      res => {
        this.result = res.json().data;
         
        if(res.json().code=="0000"){
          this.data = res.json().data.list;
          this.total = res.json().data.total;
          for(var i=0;i<res.json().data.list.length;i++)
          {  
            //对日期做处理
            let startDate=this.translateDate(new Date(res.json().data.list[i].startTime));
            let endTime=this.translateDate(new Date(res.json().data.list[i].endTime));
            this.data[i].startTime=startDate;
            this.data[i].endTime=endTime;
            console.info(startDate);
          }
        }else{
          this.message = "亲，不好意思，查询失败！";
          this.display = true;
        }
      }
    )
}

根据表格特性，具有分页功能，继而需要在分页时，也需要对日期做相应时间处理：

	/**
	 * 改变页码：真分页情况下，页号、每页大小改变就会查询后台数据
	 * @param data 
	 */
	changepage(data: any) {
	  let dataurl = "teachingManagement-web/schoolCalendar/selectByStrLike/" + this.searchContent +"/"+data.page+"/" + data.pageSize + this.authGuardService.getTicket();
	  this.http.get(dataurl).subscribe(
	    res => {
	      this.data = res.json().data.list;
	      this.total = res.json().data.total;
	    for(var i=0;i<res.json().data.list.length;i++)
	          {  
	            //日期处理
                    let startDate=this.translateDate(new Date(res.json().data.list[i].startTime));
	            let endTime=this.translateDate(new Date(res.json().data.list[i].endTime));
	            this.data[i].startTime=startDate;
	            this.data[i].endTime=endTime;

	          }
	    }
	  )
	  this.page = data.page;
	  this.pageSize = data.pageSize;
	}

结语：

   生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。

                                          —— 奥斯特洛夫斯基