绑定数值与ngb-timepicker angular

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和minuteStartTim与第一个timepicker，hourEndTime和minuteEndTime与第二个timepicker）。

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>