日期输入字段中模型绑定日期值的角度显示值

Question

我将此模型传递给视图：

export class ProgramModel {
  programId: bigint;
  category = new CategoryModel();
  name: string;
  description: string;
  shortDescription: string;
  support: string [];
  address: string;
  location: [];
  areaServed: string;
  baseLocation: string;
  website: string;
  topic: string [];
  ownerLid: string;
  keywords: string[] = [];
  startDate: Date;
  endDate: Date;
  notification: boolean;
  daysForNotice: number;
  filter: string [];
  active: boolean;
  approved: boolean;
  status: string;
  contact: ContactModel[] = [];
  departmentContact: ContactModel[] = [];
}

值 startDate 和 endDate 的呈现方式如下：

    <div class="row">
      <div class="col">
        <div class="form-group">
          <label for="startDate">Start Date</label>
          <input style="line-height: 20px" type="date" class="form-control" id="startDate"
                 [(ngModel)]="model.startDate" name="date">
        </div>
      </div>
      <div class="col">
        <div class="form-group">
          <label for="endDate">End Date</label>
          <input style="line-height: 20px" type="date" class="form-control" id="endDate"
                 [(ngModel)]="model.endDate" name="date">
        </div>
      </div>
    </div>

使用此方法简单地创建一个新的数据库记录就可以了，但是可以重用该代码编辑页面我发现我无法让这些日期输入显示先前选择的值，就像我可以使用其他字段一样。

这是页面加载时开始和结束日期的值： 开始日期：2022 年 1 月 29 日星期六 19:00:00 GMT-0500（东部标准时间） endDate: Fri Mar 11 2022 19:00:00 GMT-0500（东部标准时间）

这就是我将它们变成日期的地方：

this.programService.getProgramByID(item.programId).subscribe(
      (theProgram) => {
        theProgram.startDate = new Date(theProgram.startDate);
        theProgram.endDate = new Date(theProgram.endDate);
        this.model = theProgram;
      });

如何使这些日期输入显示值？