角度材料 - 日期选择器 - 年份选择器未触发

Question

当在 Angular 9 中初始化一个新的 Material Date 选择器时，它工作得很好。

1. 日期选择器在背景点击时关闭
2. 触发年份选择

如果向组件注入数据，则不会观察到预期的行为。

这里有一个织机供参考查看问题： https://www.loom.com/share/ca880a347e684c12b00f07d6310004eb

*.component.html:

// IGNORE THE CODING PRACTICE - it's poor quality

// *.component.ts definition
endDateSelector = false;
minEndDate: Date;

// appUserEventsDisable is on input element so that directive does not require definition

setDateForExam(event: string, label: string) {
  this.cdr.detectChanges();
  //Thu Sep 17 2020 00:00:00 GMT+0500 (Pakistan Standard Time)
  let preDate = event.toString().split(':');
  //preDate[0] = Thu Sep 17 2020 00
  let postDate = preDate[0].split(' ')
  //Thu , Sep , 17 , 2020 , 00
  let offSet = new Date().getTimezoneOffset();
  offSet = (offSet / 60) * -1;
  let preHour = Number(postDate[4]) + offSet;
  postDate[4] = preHour.toString();
  postDate[4] = postDate[4].length == 1 ? '0'.concat(postDate[4]) : postDate[4];
  let postUpdatedDate = postDate[0].concat(' ', postDate[1], ' ', postDate[2], ' ', postDate[3], ' ', postDate[4]);
  postUpdatedDate = postUpdatedDate.concat(':', preDate[1], ':', preDate[2]);
  let date = new Date(postUpdatedDate).toISOString();
  if (label === 'startDate') {
    this.finalStartDate = date;
    this.minEndDate = new Date(date);
    this.endDateSelector = true;
  } else {
    this.finalEndDate = date;
  }
  this.cdr.detectChanges();
}


// This method is called if data is available in state
mountInjectedInfo = () => {
    const examInfo: ExamInfo = this.injectedInfo.examInfo;
    if (isDevMode()) {
      console.log('start time : ', examInfo.startTime);
      console.log('end time : ', examInfo.endTime);
      console.log('total hours : ', examInfo.totalHours);
    }
    this.minEndDate = examInfo.endTime;
    this.cdr.detectChanges();
    this.endDateSelector = true;
    if (examInfo._id) this.examInformation.get('_id').setValue(examInfo._id);
    this.examInformation.get('examTitle').setValue(examInfo.examTitle);

    this.examInformation
      .get('startDate')
      .setValue(new Date(examInfo.startTime));

    this.examInformation
      .get('endDate')
      .setValue(new Date(examInfo.endTime));
    this.finalStartDate = examInfo.startTime;
    this.finalEndDate = examInfo.endTime;
    const useStartTimeValue = (timeString) => {
      let state = null;
      const timeStr = new Date(timeString);
      timeStr.setHours(timeStr.getHours() - 5);
      let extra = timeStr.toTimeString();
      const splitted = extra
        .split(/\s/g)[0]
        .split(':')
        .filter((p, i) => i < 2)
        .map((part, i) => {
          let p: any = +part;
          if (i === 0) {
            if (p > 12) {
              p -= 12;
              state = ' PM';
            } else {
              state = ' AM';
              if (p.toString().length === 1) {
                p = `0${p}`;
              }
            }
          }
          return p;
        })
        .join(':')
        .concat(state);
      return splitted;
    };

    this.examInformation
      .get('startTime')
      .setValue(useStartTimeValue(examInfo.startTime));
    this.startTime(useStartTimeValue(examInfo.startTime));

    this.examInformation
      .get('endTime')
      .setValue(useStartTimeValue(examInfo.endTime));
    this.endTime(useStartTimeValue(examInfo.endTime));
    //  this.examInformation.get('endDate').setValue(new Date(examInfo.endDate));

    // this.examInformation.get('startTime').setValue(new Date(examInfo.startTime));
    // this.examInformation.get('endTime').setValue(new Date(examInfo.endTime));
    this.totalHours = examInfo.totalHours;
    this.examInformation.get('totalHours').setValue(examInfo.totalHours);
    this.examInformation.get('subject').setValue(examInfo.subject);
    this.examInformation.get('topic').setValue(examInfo.topic);
    this.examInformation.get('description').setValue(examInfo.description);
    if (examInfo.tools.length > 0) {
      Object.keys(examInfo.tools[0]).forEach((t) => {
        this.examInformation
          .get('allowedTools')
          .get(t)
          .setValue(examInfo.tools[0][t]);
        if (t === 'custom') {
          if (examInfo.tools[0][t] && examInfo.tools[0][t] !== '') {
            this.customInpCheck.nativeElement.checked = true;
          } else {
            this.customInpCheck.nativeElement.checked = false;
          }
        }
      });
    } else {
      Object.keys(examInfo.tools).forEach((t) => {
        this.examInformation
          .get('allowedTools')
          .get(t)
          .setValue(examInfo.tools[t]);
        if (t === 'custom') {
          if (examInfo.tools[t] && examInfo.tools[t] !== '') {
            this.customInpCheck.nativeElement.checked = true;
          } else {
            this.customInpCheck.nativeElement.checked = false;
          }
        }
      });
    }
    if (examInfo.examinerControls.length > 0) {
      Object.keys(examInfo.examinerControls[0]).forEach((t) => {
        this.examInformation
          .get('examinerControls')
          .get(t)
          .setValue(examInfo.examinerControls[0][t]);
      });
      this.timeScheduling = !examInfo.examinerControls[0].schedule;
      this.cdr.detectChanges();
    } else {
      Object.keys(examInfo.examinerControls).forEach((t) => {
        this.examInformation
          .get('examinerControls')
          .get(t)
          .setValue(examInfo.examinerControls[t]);
      });
      this.timeScheduling = !examInfo.examinerControls.schedule;
      this.cdr.detectChanges();
    }
    // this.examInformation.get('examinerControls').get('autoshuffle').setValue(examInfo.examinerControls.autoShuffle);
    this.tagsList = examInfo.tags;
    this.selectedYear = examInfo.schoolYear;
    this.selectedLevels = examInfo.schoolLevel;
    this.selectedColor = this.examColors.filter(
      (c) => c.code === examInfo.examColor
    )[0];
  }


  checkValidity(dp: any) {
    this.minDate = new Date();
    this.cdr.detectChanges();
  }

<div *ngIf="endDateSelector" class="date date-and-time-container">
  <mat-icon class="date-and-time-icon">event</mat-icon>
  <input appUserEventsDisable matInput [matDatepicker]="endDatepicker" (click)="endDatepicker.open()" (dateInput)="endDatepicker.close()" [readonly]="true" (dateInput)="setDateForExam($event.value,'endDate')" [min]="minEndDate" placeholder=" dd / mm / yyyy "
    class="c-filed cursor-pointer" formControlName="endDate" />
  <mat-datepicker (opened)="checkValidity(endDatepicker)" #endDatepicker></mat-datepicker>
</div>