Angular4以一种形式提供多个ngb-timepicker [英] Multiple ngb-timepicker in one form with Angular4

问题描述

我正在使用Angular 4使用两个ngb-timepicker创建一个具有开始时间和结束时间的表单.当我将模型都设置为两者时，第一个实例化第二个的值.关于如何分别实例化它们的任何想法吗?我的HTML看起来像这样:

I am using Angular 4 to create a form with start time and end time, using two ngb-timepicker. When I set the model to both of them, the first one instantiates the values for the second one. Any idea on how to instantiate them separately? My HTML looks like this:

<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是正确的.

The result is that time1 will show time2, so only time2 is correct.

推荐答案

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

You need NgbTimeStruct to format the date which ngb-timepicker knows

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};
  }

}

这篇关于Angular4以一种形式提供多个ngb-timepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！