帶有向上和向下箭頭的 ngb 時間選擇器問題

Question

我正在為我的 angular 10 項目使用 bootstrap 4 和 ngb 時間選擇器。 我正確添加了所有代碼。 但是時間選擇器上下箭頭不起作用。 這是我的代碼

  <ngb-timepicker [(ngModel)]="time" formControlName="time"></ngb-timepicker>

我的組件如下

    import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-my-profile',
  templateUrl: './my-profile.component.html',
  styleUrls: ['./my-profile.component.css']
})
export class MyProfileComponent implements OnInit {
  profile: any = {};
  @ViewChild(NgForm) profileform: NgForm;
  constructor() { }

  ngOnInit() {
  }

  time: NgbTimeStruct = { hour: 13, minute: 30, second: 0 };
  addScheduleCheckin() { }
}

當我單擊向上和向下箭頭時，會觸發此錯誤。

Answer 1

我可以給你一個線索。 我知道這不是一個答案，而我需要過去的代碼塊，所以評論不起作用。

錯誤發生在這里：

  changeHour(step: number) {
    this.model.changeHour(step);
    this.propagateModelChange();
  }

出於某種原因， model是undefined 。 model值在此處設置：

  writeValue(value) {
    const structValue = this._ngbTimeAdapter.fromModel(value);
    this.model = structValue ? new NgbTime(structValue.hour, structValue.minute, structValue.second) : new NgbTime();
    if (!this.seconds && (!structValue || !isNumber(structValue.second))) {
      this.model.second = 0;
    }
    this._cd.markForCheck();
  }

writeValue方法是ControlValueAccessor接口的一部分。 當我們綁定到[ngModel]時調用它。 我無法想象如果執行了這個代碼塊，它怎么會變得undefined 。

假設它沒有被執行。 如果FormsModule沒有導出，如果之前發生了一些錯誤並阻止writeValue執行，則可能會發生這種情況。

我希望這可以幫助您解決錯誤。