Angular - 打开弹出窗口时使日历的日期变为绿色

Question

我试图让我的日历在打开我的日期列表（这是一个字符串列表）中的所有日期时具有绿色背景。

ngOnInit(): void {
   this.roomService.getReservableDatesFromRoom(room.roomName).subscribe(data => {
      for (let i = 0; i < data.length; i++) {
        this.dates.push(`${data[i].reservableDate[0]}-${data[i].reservableDate[1]}-${data[i].reservableDate[2]}`);
      }
    });
  }

我的 HTML 看起来像这样：

<mat-card class="demo-inline-calendar-card">
    <h2 class="text-center">Reserveerbare datums</h2>
    <mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected"></mat-calendar>
</mat-card>

可视化：

进入此屏幕时日期列表已经填满，但所有值都是红色的。

我已经有一个函数（与 [dateClass] 属性一起使用）所以当我选择某个日期时它会变成绿色。同样只有在选择 1 个日期后，我列表中的其他日期也会变成绿色，但我想让它们变成绿色而不选择 1 个日期：

isSelected = (date: any) => {
    if (date.isBefore(Date.now() - 1, 'day')) {
      return 'disabled-dates'
    }
    return this.dates.filter((x) => date.isSame(x)).length > 0 ? 'selected' : 'not-selected';
  };

如果有人知道如何做到这一点，将不胜感激！

提前致谢！

Answer 1

简单的解决方案：

 **<mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="!isSelected"></mat-calendar>**

代替

**<mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected"></mat-calendar>**

您只需要默认应用 dateClass 并使您可能希望拥有 isSelected 属性的假值。