Angular 8中ngx-material-timepicker无法通过ngModel获取选中时间

我之前也踩过这个版本的ngx-material-timepicker的坑！你遇到的问题是因为这个版本的双向绑定（[(ngModel)]）实现有缺陷——虽然输入框的视觉值更新了，但组件实例里的time变量并没有同步更新。下面给你两种靠谱的解决方案：

方案一：用组件的timeSet事件手动同步值 #

这是最直接有效的方法，利用时间选择器内置的timeSet事件捕获选中的时间，再同步到你的变量里：

模板代码修改： #

<input 
  placeholder="24hr format" 
  aria-label="24hr format" 
  [ngModel]="time"  <!-- 改为单向绑定 -->
  [ngxTimepicker]="pickerA" 
  [format]="24"
>
<ngx-material-timepicker #pickerA (timeSet)="onTimeSet($event)"></ngx-material-timepicker>  <!-- 添加timeSet事件监听 -->
<button (click)="showTime()">showTime</button>

组件代码修改： #

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  time = "22:00";

  // 捕获时间选择完成事件
  onTimeSet(event: any) {
    this.time = event.time; // 将选中的时间同步到组件变量
  }

  showTime() {
    console.log(this.time); // 现在能打印最新选中的时间了
  }
}

方案二：强制触发变更检测（备选） #

如果一定要保留双向绑定，你可以手动触发Angular的变更检测，确保变量值同步：

组件代码修改： #

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  time = "22:00";

  constructor(private cdr: ChangeDetectorRef) {}

  showTime() {
    this.cdr.detectChanges(); // 手动触发变更检测，同步变量值
    console.log(this.time);
  }
}

不过更推荐方案一，因为它是组件官方设计的事件，稳定性更高，避免了手动操作变更检测的潜在问题。

内容的提问来源于stack exchange，提问作者alloisxp