当所有数据都正确返回时，为什么在我的 ngbtimepicker 中使用 ngModelChanges 时会出现此错误？

Question

我有一个 ngbtimepicker。我正在创建一个时间 sheet，其中用户只能以 0-15-30-45 的增量输入时间。我正在使用弹出模式输入时间。例如，如果用户键入 10:23pm，我希望时间选择器四舍五入到最接近的 15 分钟，在本例中为 10:30。当我输入 10:23pm，然后点击失焦时，时间确实变为 10:30。我还有一个保存按钮，所以当点击保存时它会保存该数据。我检查了 chrome 工具以查看它是否 returns 使用我的方法使用 (ngModelChange) 进行更改的正确数据并检查出来。

但是，在我点击保存按钮后再次调用该方法，我得到一个类型错误“无法读取属性 'minute' of null.

我放入了一个调试器，在我点击保存按钮后，它再次通过我的方法 setStartMinutesOnChanges(startTime) 并显示 startTime = null。我该如何解决这个问题？

<input type="text" ngbDatepicker [(ngModel)]="start" [firstDayOfWeek]="7" #sd="ngbDatepicker" name="day_s" class="form-control form-control-sm dark-text" id="start">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary btn-sm calendar" style="background-color:#1ab394;height:31px;" (click)="sd.toggle()" type="button">
                  <fa-icon [icon]="faCaretDown" style="color:white;"></fa-icon>
                </button>
              </div>
            </div>
            <div class="col-4 d-flex justify-content-center">
              <ngb-timepicker [(ngModel)]="startHM" name="startDate" (ngModelChange)="setStartMinutesOnChange($event)" [meridian]="meridian" [minuteStep]="15" size="small"></ngb-timepicker>
            </div>
          </div>

export class EditAppointmentComponent implements OnInit  {

  recId = 0; entry: IAppointment; resources: IResource[]; recurrances: IRecurranceType[]; saving = false;
  meridian = true; start: NgbDateStruct; startHM = {hour: 0, minute: 0}; end: NgbDateStruct; endHM = {hour: 0, minute: 0};
  faCaretDown=faCaretDown; ticketId: number = 0;


  @ViewChild('editAppointmentForm') formValues;

  static show(modalService: NgbModal, id: number, tid: number): Promise<number> {
    let mRef = modalService.open(EditAppointmentComponent, { ariaLabelledBy: 'edit-appointment', backdrop: 'static', keyboard: true, size: 'lg' });
    let c = <EditAppointmentComponent>mRef.componentInstance; c.recId = id; c.ticketId = tid;
    return mRef.result;
  }

  constructor(private globals: GlobalsService, private server: ServerService, private activeModal: NgbActiveModal, private modalService: NgbModal,
    ) {}


  get form(): import("@angular/forms").NgForm { return this.formValues; }

  ngOnInit() { this.load(); }

  setStartMinutesOnChange(startTime) {

    let m = ((Math.round(startTime.minute/15) * 15) % 60);

    if(startTime.minute != 0 || startTime.minute != 15 || startTime.minute != 30 || startTime.minute != 45) {
      this.startHM = {hour: startTime.hour, minute: m };
    }
    console.log(this.startHM);
  }

Answer 1

该功能运行良好，因此它第二次运行 (ngModelChange) 时将 startTime 和 endTime 声明为 null。我做的一个简单的修复是，如果这两个都是空值或不是值，只是 return 这样我就可以继续前进。

setStartMinutesOnChange(startTime) {
    if(!startTime) return;
    let m = ((Math.round(startTime.minute/15) * 15) % 60);

    if(startTime.minute >= 53) {
        this.startHM = {hour: startTime.hour + 1, minute: 0};
    } else if(startTime.minute != 0 || startTime.minute != 15 || startTime.minute != 30 || startTime.minute != 45) {
        this.startHM = {hour: startTime.hour, minute: m };
    }
  }

  setEndMinutesOnChange(endTime) {
    if(!endTime) return;
    let m = ((Math.round(endTime.minute/15) * 15) % 60);

    if(endTime.minute >= 53) {
      this.endHM = {hour: endTime.hour + 1, minute: 0};
    }
    if(endTime.minute != 0 || endTime.minute != 15 || endTime.minute != 30 || endTime.minute != 45) {
      this.endHM = {hour: endTime.hour, minute: m };
    }
  }

当所有数据都正确返回时，为什么在我的 ngbtimepicker 中使用 ngModelChanges 时会出现此错误？

Why am I getting this error using ngModelChanges in my ngbtimepicker when all the data is returned correctly?

ng-bootstrap

angular