这是我的日历：

<div class="calendarWrapper mat-elevation-z1">
    <mat-calendar [dateClass]="dateClass"></mat-calendar>
  </div>

字符串
这是要添加的类的scss：

button.orange {
  background: orange;
  border-radius: 100%;
}

型
这是组件的TypeScript文件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
import { DateTime } from 'luxon';
import { ColorService } from 'src/app/_services/color.service';
import { AppointmentsDTO } from 'src/app/api/models';
import { WebsiteAppointmentsService } from 'src/app/api/services';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'bookings-element',
  templateUrl: './bookings-element.component.html',
  styleUrls: ['./bookings-element.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class BookingsElementComponent implements OnInit {
  selectedDate: string = '';

  appointments: AppointmentsDTO[] = [];

  constructor(
    public colorService: ColorService,
    private appointmentsService: WebsiteAppointmentsService
  ) {}

  ngOnInit(): void {}

  async getBookings() {
    return new Promise<void>((resolve) => {
      this.appointmentsService
        .getApiWebsiteAppointmentsGetAppointments({
          date: this.selectedDate,
          tenantid: environment.tenantId,
        })
        .subscribe((data: any) => {
          if (data) {
            this.appointments = data;
            resolve();
            console.log(this.appointments);
          }
        });
    });
  }

  // dateClass: MatCalendarCellClassFunction<Date> = async (cellDate, view) => {
  //   if (view === 'month') {
  //     const cellISODate = DateTime.fromJSDate(new Date(cellDate), {
  //       zone: 'Europe/Berlin',
  //     }).toISODate();
  //     this.selectedDate = DateTime.fromJSDate(new Date(cellISODate), {
  //       zone: 'Europe/Berlin',
  //     }).toISODate();

  //     await this.getBookings();

  //     console.log('Selected Date:', cellISODate);
  //     console.log('Appointments:', this.appointments);

  //     const isBooked = this.appointments.some((appointment) => {
  //       const startDate = DateTime.fromJSDate(new Date(appointment.startDate), {
  //         zone: 'Europe/Berlin',
  //       }).toISODate();
  //       const endDate = DateTime.fromJSDate(new Date(appointment.endDate), {
  //         zone: 'Europe/Berlin',
  //       }).toISODate();

  //       console.log('Appointment Start Date:', startDate);
  //       console.log('Appointment End Date:', endDate);

  //       return (
  //         DateTime.fromJSDate(new Date(cellISODate), {
  //           zone: 'Europe/Berlin',
  //         }) >=
  //           DateTime.fromJSDate(new Date(startDate), {
  //             zone: 'Europe/Berlin',
  //           }) &&
  //         DateTime.fromJSDate(new Date(cellISODate), {
  //           zone: 'Europe/Berlin',
  //         }) <=
  //           DateTime.fromJSDate(new Date(endDate), {
  //             zone: 'Europe/Berlin',
  //           })
  //       );
  //     });

  //     console.log('isBooked:', isBooked);

  //     return isBooked ? 'orange' : '';
  //   }

  //   return '';
  // };

  dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    // Only highligh dates inside the month view.
    if (view === 'month') {
      const date = cellDate.getDate();

      // Highlight the 1st and 20th day of each month.
      return date === 1 || date === 20 ? 'orange' : '';
    }

    return '';
  };
}

型
问题是，Angular Material的原始dateClass函数一切正常，类正在被添加。但我的自定义dateClass函数却不起作用！它的逻辑像预期的那样工作，但类没有被添加到按钮中。有人知道为什么它没有添加类吗？也许是因为JavaScript，但我需要它来等待API响应。
封装不是问题，就像你在我的TS文件中看到的那样。我希望类“橙子”被添加到按钮中，当来自dateClass函数的isBooked返回true时，它现在被注解了。