angular 8.1.0 系统中使用ng-zorro-antd 8.5.2的相关问题

ng-zorro-ant是angular官方推荐的一款国内的开源组件，通常情况下非常好用，但是遇到一些细致的要求的时候，就需要自己动手解决一些问题了。

比如今天就遇到领导要求在日期选择框中选择日期以后自动把时间给选中，如果是普通的时间框的话，比如这样

就可以直接按照官方给的api直接进行修改使用[nzShowTime]

但是很可惜，使用的是range-picker，也就是这样

官方虽然在api里写上了

nzShowTime 里有nzDefaultOpenValue 但是实测在代码中加入nzDefaultOpenValue对于range-picker来说并没有任何作用

所以想通过官方api直接搞定是不行的，只能通过事件进行取巧，达到目的

直接上代码:

关注重点，里面有两个事件，一个是(ngModelChange)，另一个是(nzOnCalendarChange)。根据官方api描述，前者是时间发生变化时的回调，后者是待选日期发生变化的回调。简而言之就是前者只要时间和日期改变了就会触发，后者只会在日期改变的时候会触发。所以我们就在(nzOnCalendarChange)这个事件上做做文章。

目前的情况是，只要选中了时间，会自动把时间选择为此时此刻

所以思路就是在点击日期的那一刻也就是触发(nzOnCalendarChange)事件的时候，把日期的时分改为自己想要的时间

代码如下

onChange($event,type?){//日期选择框
    if(type){
      this.allDate = []
      this.trueData.startTime = ''
      this.trueData.endTime = ''
      $event[0]=this.Format(moment($event[0]).set({'hours':0,'minute': 0, 'second': 0}))
      if($event.length>1){
        $event[1]=this.Format(moment($event[1]).set({'hours':23,'minute': 59, 'second': 0}))
      }
    }
    if($event.length>1){
      this.trueData.startTime = this.Format($event[0])
      this.trueData.endTime = this.Format($event[1])
    }
    this.allDate = $event
  }

Format(time){//返回指定类型的日期
return moment(time).format('YYYY-MM-DD HH:mm')
}

其中$event是事件的返回值，是一个数组，我们直接修改返回值；moment是一个开源的js库，非常好用。

然后再把值赋给绑定的的allDate，这样页面的展示和数据就都是我们想要的了