dateclass()的角度材料日期选择器问题 [英] angulare material datepicker problem with dateclass()

问题描述

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

i am using angular's datepicker to create a booking service. I am experiencing a huge problem, when I make the reservation I activate a dialog that confirms the outcome of the reservation, if the outcome is positive another dialog opens with the confirmation. when you click on the button 'ok', to close the final dialogue and return to the datepicker, a call starts that takes all the customer's reservations and colors the dates blue. here the chaos happens: the dateClass () method inside the appcomponent.ts file is activated several times and cycles the old reservation list and not the new one. I attached the code:

APPCOMPONENT.HTML

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

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

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 个预订……会发生什么?我该怎么办?

I put console.log (), in the dateclass () and in click () when dateclass () starts, the log shows me that I have 3 reservations, when I make a reservation the click () log tells me that I have 4 reservations. but when I close the dialogue, dateclass () activates again and returns me to 3 reservations. if I close and restart the app it shows me 4 reservations ... what happens? what do I have to do?

推荐答案

不要在 模板.由于 dataClass 输入属性需要 MatCalendarCellClassFunction，因此将函数分配给 dateClass 属性类似这样.

Don't call function in template.Since dataClass input property expects MatCalendarCellClassFunction,assign function to dateClass property something like this.

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>

这篇关于dateclass()的角度材料日期选择器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！