Angular4 以一种形式呈现多个 ngb-timepicker答案

【问题标题】：Multiple ngb-timepicker in one form with Angular4Angular4 以一种形式呈现多个 ngb-timepicker
【发布时间】：2018-02-20 03:37:19
【问题描述】：

我正在使用 Angular 4 创建一个包含开始时间和结束时间的表单，使用两个 ngb-timepicker。当我将模型设置为它们两个时，第一个实例化第二个的值。关于如何分别实例化它们的任何想法？我的 HTML 如下所示：

<ngb-timepicker [(ngModel)]="time1"></ngb-timepicker>
<ngb-timepicker [(ngModel)]="time2"></ngb-timepicker>

还有我的组件：

import {Component} from '@angular/core';

@Component({
 selector: 'schedule-form',
 templateUrl: './schedule-form.component.html'
})

export class NgbdTimepickerBasic {
  time1 = {hour: startDateH, minute: startDateM};
  time2 = {hour: endDateH, minute: endDateM};
}

结果是time1会显示time2，所以只有time2是正确的。

【问题讨论】：

不完全确定您的问题是什么。您可以发布一个显示您的问题的 stackblitz 吗？
plnkr.co/edit/SVkL4mnrzkhHHP6NkDjL?p=preview 我也在使用表单控件，因为我只能对它们都使用“ctrl”，所以它们的实例化都是一样的。

标签： angular timepicker ng-bootstrap

【解决方案1】：

您需要NgbTimeStruct 来格式化ngb-timepicker 知道的日期

import {Component} from '@angular/core';
import {NgbTimeStruct} from '@ng-bootstrap/ng-bootstrap';

@Component({
 selector: 'schedule-form',
 templateUrl: './schedule-form.component.html'
})

export class NgbdTimepickerBasic {
  //declaration
  time1: NgbTimeStruct;
  time2: NgbTimeStruct;

  ngOnInit() {
    //get your start and end time and assign it to below 
    this.time1 = {hour: 13, minute: 30, second: 0};
    this.time2 = {hour: 16, minute: 15, second: 0};
  }

}

【讨论】：

谢谢，我没有将其声明为 NgbTimeStruct