javascript - 格式化 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>

使用日期选择器，我可以将其从对象重新格式化为字符串:

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

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

Answer 1

[(ngModel)] 语法只能设置数据绑定(bind)属性。如果您需要做更多或不同的事情，您可以编写扩展形式。 属性绑定(bind) [ngModel] 负责更新底层输入 DOM 元素。当 DOM 发生更改时，事件绑定(bind) (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