将数值与 ngb-timepicker 角度绑定

Question

我有一个

priceRule

对象，其中包含 4 个属性：

public hourStartTime: number,
public minuteStartTime: number,
public hourEndTime: number,
public minuteEndTime: number,

还有两个

nbg-timepicker

：

<!-- timepicker to pick the start -->
<ngb-timepicker [(ngModel)]="...">

</ngb-timepicker>

<!-- timepicker to pick the end -->
<ngb-timepicker [(ngModel)]="...">

</ngb-timepicker>

我不知道要输入什么来绑定我的值（hourStartTime 和 分钟StartTim 与第一个时间选择器，hourEndTime 和 分钟EndTime 与第二个时间选择器）。

Answer 1

在您的组件中，您可以像这样定义时间：

time = {hour: 13, minute: 30};

在您的 HTML 中：

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

您的情况：

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

@Component({
  selector: 'ngbd-timepicker-basic',
  templateUrl: 'src/timepicker-basic.html'
})
export class NgbdTimepickerBasic {
  time = any;
  priceRule: any;
  constructor() {
    this.priceRule.hourStartTime = 13;
    this.priceRule.minuteStartTime = 50;    
    time = { hour: this.priceRule.hourStartTime, minute: this.priceRule.minuteStartTime }
  }
}

更新

因为

ngb-timepicker

需要一个

类型的对象

{ time: number, minute: number }

因此，如果您不想使用额外的变量，那么您必须稍微更改

priceRule

的结构。所以 而不是

export class PriceRule {
 public hourStartTime: number,
 public minuteStartTime: number,
 public hourEndTime: number,
 public minuteEndTime: number,
}

将会是：

export class PriceRule {
  public startTime: { hour: number, minute: number };
  public endTime: { hour: number, minute: number };
}

在你的组件中：

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

@Component({
  selector: 'ngbd-timepicker-basic',
  templateUrl: 'src/timepicker-basic.html'
})
export class NgbdTimepickerBasic {
  time = any;
  priceRule: any;
  constructor() {
    this.priceRule.startTime = { hour: 13, minute: 4 }    
  }
}

在您的 HTML 中：

<ngb-timepicker [ngModel]="priceRule.startTime"></ngb-timepicker>

Answer 2

您可以从

NgbTimeStruct

使用

@ng-bootstrap/ng-bootstrap

界面。
https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/timepicker/ngb-time-struct.ts

time: NgbTimeStruct;
...
this.time = { hour: 12, minute: 14, second: 0 };

和你的模板

<ngb-timepicker [ngModel]="initialTime"></ngb-timepicker>