格式化 ngb-timepicker 使其返回为字符串而不是对象

Question

我试图让 ngb-timepicker 返回一个字符串而不是一个对象。目前它返回以下内容：

{
  "hour": 13,
  "minute": 30
}

但我希望它像这样返回：

"13:30"

这是我的html：

    <div class="calender"> <ngb-datepicker #dp 
[(ngModel)]="model"></ngb-datepicker>


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

使用 datepicker 我可以将它从一个对象重新格式化为一个字符串：

 constructor(private dateFormatter: NgbDateParserFormatter) {
const string_date = this.dateFormatter.format(this.model);
}

是否有适用于时间的 NgbDateParserFormatter 版本？

Answer 1

[(ngModel)] 语法只能设置数据绑定属性。如果您需要做更多或不同的事情，您可以编写扩展表单。 属性绑定[ngModel] 负责更新底层输入DOM 元素。当 DOM 发生变化时，事件绑定 (ngModelChange) 会通知外界。

HTML

 <ngb-timepicker [(ngModel)]="time" (ngModelChange)="onTimeChange($event)"></ngb-timepicker>
    <hr>
    <pre>{{newTime}}</pre>

组件

export class AppComponent  {
  name = 'Angular 6';
  public newTime:string='13:30';
  time = {hour: 13, minute: 30};
onTimeChange(value:{hour:string,minute:string})
{
   console.log(value)
   this.newTime=`${value.hour}:${value.minute}`;
}

}

Live Demo