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和minutesStartTim，第二个时间选择器为hourEndTime和minuteEndTime）。

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>

用ngb-timepicker角度绑定数字值

1 个答案: