dataclass（）的角度材料日期选择器问题答案

【问题标题】：angulare material datepicker problem with dateclass()dataclass（）的角度材料日期选择器问题
【发布时间】：2021-01-21 10:24:03
【问题描述】：

我正在使用 Angular 的日期选择器来创建预订服务。我遇到了一个大问题，当我进行预订时，我会激活一个确认预订结果的对话框，如果结果是肯定的，则会打开另一个对话框并确认。当您单击“确定”按钮以关闭最终对话并返回日期选择器时，将启动一个调用，该调用将获取所有客户的预订并将日期涂成蓝色。这里发生了混乱： appcomponent.ts 文件中的 dateClass () 方法被激活了几次，并循环旧的保留列表而不是新的保留列表。我附上了代码：

APPCOMPONENT.HTML

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Clicca sul calendario</mat-label>
    <input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>
  </mat-form-field>

APPCOMPONENT.TS

dateClass() {
      return (date: Date): MatCalendarCellCssClasses => {
      const unvailableArray = this.shareDate.unavailableDates;
      const reservedArray = this.shareDate.reservedDate;
      let day = 'freeDate';
      for (const element of reservedArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'prenotation';
          return day;
        }
      }
      for (const element of unvailableArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'unavailable';
          return day;
        }
      }
      return day;
    };

  }

dialogConfirm.ts

click() {
    const devCode = this.getQueryCode.getQueryParameter('d');
    this.shareDate.device.deviceId = devCode;
    this.postservices.getPrenotationList(this.shareDate.device).subscribe((resp1: GetDataResponse) => {
      if (resp1) {
        this.shareDate.foundDate = resp1;
        for (const element of this.shareDate.foundDate.reservationdDates) {
          this.shareDate.reservedDate.push(new Date(element));
        }
      }
      console.log('resp1', resp1);
    });
    this.postservices.getPrenotationList(this.shareDate.device).subscribe((resp1: GetDataResponse) => {
      if (resp1) {
        this.shareDate.foundDate = resp1;
        for (const element of this.shareDate.foundDate.unavailableDates) {
          this.shareDate.unavailableDates.push(new Date(element));
        }
      }
    });
     }

我把console.log()，在dateclass()和click()中当dateclass()启动时，日志显示我有3个预订，当我进行预订时，click()日志告诉我我有 4 个预订。但是当我关闭对话时， dateclass () 再次激活并将我返回到 3 个保留。如果我关闭并重新启动应用程序，它会显示 4 个预订……会发生什么？我该怎么办？

【问题讨论】：

标签： css angular typescript angular-material

【解决方案1】：

不要在 template 中调用函数。由于 dataClass 输入属性需要 MatCalendarCellClassFunction，因此将函数分配给 dateClass 属性，如下所示。

component.ts

dateClass = (date: Date): MatCalendarCellCssClasses => {
      const unvailableArray = this.shareDate.unavailableDates;
      const reservedArray = this.shareDate.reservedDate;
      let day = 'freeDate';
      for (const element of reservedArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'prenotation';
          return day;
        }
      }
      for (const element of unvailableArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'unavailable';
          return day;
        }
      }
      return day;
    };

component.ts

 <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Clicca sul calendario</mat-label>
    <input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass" #picker> </mat-datepicker>
  </mat-form-field>

【讨论】：