代码之家 › 专栏 › 技术社区 › aaa_ro

具有Angular4的一种形式的多个ngb计时器

ng-bootstrap timepicker angular

aaa_ro · 技术社区 · 7 年前

我正在使用Angular 4创建一个带有开始时间和结束时间的表单,使用两个ngb时间选择器。当我将模型设置为两者时,第一个将实例化第二个的值。有没有关于如何分别实例化它们的想法? 我的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是正确的。

1 回复 | 直到 7 年前

Hareesh 7 年前

你需要 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};
  }

}

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前