Angular弹窗打开时将日历指定日期设置为绿色背景

问题根源 #

你的dates列表通过异步请求填充，但mat-calendar初始化时dates还为空，导致isSelected函数一开始匹配不到任何日期，返回not-selected类（红色背景）。只有当选中日期触发selectedChange事件时，日历才会重新计算所有日期的样式类，此时dates已经加载完成，所以能匹配到并显示绿色。

解决方案 #

1. 异步数据加载后触发日历重新渲染

通过变更检测通知Angular更新日历的日期样式：

首先在组件中引入依赖并声明实例：

import { ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatCalendar } from '@angular/material/calendar';

// 组件类内
@ViewChild('calendar') calendar!: MatCalendar<any>;
constructor(private cdr: ChangeDetectorRef) {}

修改ngOnInit中的订阅逻辑，替换循环为map并触发变更检测：

ngOnInit(): void {
  this.roomService.getReservableDatesFromRoom(room.roomName).subscribe(data => {
    // 用map简化日期格式转换
    this.dates = data.map(item => 
      `${item.reservableDate[0]}-${item.reservableDate[1]}-${item.reservableDate[2]}`
    );
    // 触发变更检测，让日历重新计算所有日期的样式类
    this.cdr.detectChanges();
  });
}

2. 优化isSelected函数性能

用some替代filter，只需判断是否存在匹配日期即可，无需遍历整个列表：

isSelected = (date: any) => {
  if (date.isBefore(Date.now() - 1, 'day')) {
    return 'disabled-dates';
  }
  // some找到匹配项就停止遍历，性能更优
  return this.dates.some(x => date.isSame(x)) ? 'selected' : 'not-selected';
};

3. 确认CSS样式正确

确保样式类的背景色设置符合预期：

.selected {
  background-color: #2ecc71; /* 绿色 */
  color: #fff;
}

.not-selected {
  background-color: #e74c3c; /* 红色 */
  color: #fff;
}

.disabled-dates {
  color: #95a5a6;
  background-color: #ecf0f1;
}

效果说明 #

修改后，当异步请求完成并填充dates列表后，Angular会触发变更检测，mat-calendar会重新调用isSelected计算每个日期的样式类，此时dates中的日期会直接显示绿色背景，无需手动选中任何日期。

内容的提问来源于stack exchange，提问作者Elias