ant for angular TimePicker时间选择框数据重填

问题描述

向数据库中存入一个字符串数据，记录时分，即几点几分。输入的时候是使用TimePicker得到的，直接是一个new Date()类型的标准时间，当我修改数据时，我需要将TimePicker显示我数据库中的几点几分。

解决

对TimePicker选择框设置一个Date()类型的默认值即可，Date(）需要传参，将从数据库中得到的数据切开，放到对应的时，分位置。
资料查看

前端部分代码

    <nz-form-item>
      <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>上午开始上课时间</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-time-picker formControlName="morning_beg_time" nzFormat="HH:mm"></nz-time-picker>
        <nz-form-explain *ngIf="validateForm.get('morning_beg_time')?.dirty && validateForm.get('morning_beg_time')?.errors">请选择上午开始上课时间!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>下午开始上课时间</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-time-picker formControlName="afternoon_beg_time" nzFormat="HH:mm"></nz-time-picker>
        <nz-form-explain *ngIf="validateForm.get('afternoon_beg_time')?.dirty && validateForm.get('afternoon_beg_time')?.errors">请选择下午开始上课时间!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item>
      <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>晚上开始上课时间</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-time-picker formControlName="evening_beg_time" nzFormat="HH:mm"></nz-time-picker>
        <nz-form-explain *ngIf="validateForm.get('evening_beg_time')?.dirty && validateForm.get('evening_beg_time')?.errors">请选择晚上开始上课时间!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

ts处理部分

  dataReset(){
   // console.log(this.itemSchedule);
    var arr1 = this.itemSchedule.morning_beg_time.split(":");
  //  console.log(arr1);
    var arr2 = this.itemSchedule.afternoon_beg_time.split(":");
    var arr3 = this.itemSchedule.evening_beg_time.split(":");
    this.validateForm = this.fb.group({
      school:[this.itemSchedule.school_id,[Validators.required]],
      morning_beg_time:[new Date(2019,3,1,arr1[0],arr1[1]),[Validators.required]],
      afternoon_beg_time:[new Date(2019,3,1,arr2[0],arr2[1]),[Validators.required]],
      evening_beg_time:[new Date(2019,3,1,arr3[0],arr3[1]),[Validators.required]],
      class_between_time:[this.itemSchedule.class_between_time,[Validators.required]],
      one_class_time:[this.itemSchedule.one_class_time,[Validators.required]]
    });
  }

由于没有存相关的年月日，故年月日随便定义一个，算是投机取巧吧。