dateclass()的angular材质日期选择器问题

Question

我正在使用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;
};
}

对话框确认.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((中，当dateclass(。但当我关闭对话时，dateclass((再次激活，并将我返回到3个预订。如果我关闭并重新启动应用程序，它会显示我4个预订。。。会发生什么？我该怎么办？

Answer 1

不要调用模板中的函数。由于dataClass输入属性需要MatCalendarCellClassFunction，所以将函数分配给dateClass属性，如下所示。

组件.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;
};

组件.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>