如何让Angular Material日期时间选择器初始化显示绑定的自定义时间

1. 确保绑定值是Date类型对象 #

ngx-mat-datetime-picker依赖原生Date对象识别时间，若element.date是字符串或时间戳，需在组件数据加载阶段转换为Date对象：

// 数据处理示例
this.dataList.forEach(item => {
  // 适配ISO字符串、数字时间戳等格式
  item.date = typeof item.date === 'string' ? new Date(item.date) : new Date(Number(item.date));
});

2. 给选择器绑定数据源 #

在ngx-mat-datetime-picker上添加双向绑定或单向值绑定，让选择器与输入框共享同一数据源：
修改模板中的选择器代码：

<ngx-mat-datetime-picker #picker 
  [showSpinners]="true" [showSeconds]="true" [stepHour]="1"
  [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [color]="color" [enableMeridian]="true"
  [disableMinute]="false" [hideTime]="false"
  [(ngModel)]="element.date"> <!-- 新增双向绑定 -->
</ngx-mat-datetime-picker>

若不需要双向同步，也可使用单向绑定：

[value]="element.date"

3. 确保格式化方法不修改原始值 #

getDisplayDate需为纯函数，仅做格式化显示，不能修改element.date的原始值：

getDisplayDate(date: Date): string {
  // 示例：用DatePipe格式化时间
  return this.datePipe.transform(date, 'yyyy-MM-dd HH:mm:ss');
}

4. 手动触发选择器值更新（可选） #

若上述方法无效，可通过ViewChildren获取选择器实例，手动同步绑定值：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NgxMatDatetimePicker } from '@angular-material-components/datetime-picker';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren(NgxMatDatetimePicker) pickers!: QueryList<NgxMatDatetimePicker<any>>;

  ngAfterViewInit(): void {
    // 数据加载完成后调用，确保DOM已渲染完成
    this.pickers.forEach(picker => {
      if (picker.value) {
        picker.updateValue(picker.value);
      }
    });
  }
}

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