为何DatePipe的'HH:mm'格式在Angular时间输入框中不生效？

我一眼就看出你代码里的问题啦——同时使用了双向绑定[(ngModel)]和单向绑定[ngModel]，这俩指令会“打架”，直接导致绑定失效，所以时间完全显示不出来。另外type="time"的输入框对绑定值的格式有要求，得正确处理Date对象和时间字符串的转换才行。

给你两个靠谱的解决方案：

方案一：用ngModel单向绑定+ngModelChange更新数据 #

把重复的双向绑定去掉，只用单向绑定显示格式化后的时间，再通过ngModelChange事件来更新你的appointmentTime对象：

模板代码：

<mat-form-field>
  <input 
    matInput 
    type="time" 
    placeholder="Choose a time" 
    [ngModel]="appointmentTime | date:'HH:mm'"
    (ngModelChange)="updateAppointmentTime($event)"
  />
</mat-form-field>

组件类里添加处理方法：

updateAppointmentTime(timeStr: string) {
  // 把时间字符串拆成小时和分钟，更新Date对象
  const [hours, minutes] = timeStr.split(':');
  this.appointmentTime.setHours(parseInt(hours, 10));
  this.appointmentTime.setMinutes(parseInt(minutes, 10));
}

方案二：使用Angular FormControl（更推荐） #

如果你项目里用了表单模块，直接用FormControl会更简洁，也能避免绑定冲突：

组件类代码：

import { FormControl } from '@angular/forms';

// 用FormControl包装Date对象
public appointmentTime = new FormControl(new Date());

模板代码：

<mat-form-field>
  <input 
    matInput 
    type="time" 
    placeholder="Choose a time" 
    [formControl]="appointmentTime"
    [value]="appointmentTime.value | date:'HH:mm'"
  />
</mat-form-field>

为什么原来的代码不行？ #

当你同时写[(ngModel)]="appointmentTime"和[ngModel]="appointmentTime | date:'HH:mm'"时，Angular会混淆数据流向——双向绑定想把Date对象传给输入框，而单向绑定又想传格式化后的字符串，结果谁都没生效，输入框就空了。分开处理显示和数据更新，就能让输入框正常显示时分，同时保证你的Date对象能正确更新啦。

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