Angular 15日历无法显示数据库加载的事件问题求助

我基于Angular 15开发日历组件，用来加载数据库中的事件，但日历上完全看不到事件。我参考了无事件标签的示例，尝试把数据库数据填充到events数组里，还是没效果。相关代码如下：

CalendarioComponent.ts #

export class CalendarComponent implements OnInit{
    view: CalendarView = CalendarView.Month;
    myDate=new Date();
    viewDate: Date = new Date();
    data:any;
    events: CalendarEvent[] = [];

    period!: CalendarViewPeriod;

    constructor(private cdr: ChangeDetectorRef, private _http: HttpClient,private _authService:AuthService, private _ausenciaService: AusenciaService) {}

    ngOnInit(): void {
          this.data = this._authService.loadCurrentUser();
          this.carregarTeletrabalho();
          console.log(this.events);
    }

    beforeViewRender(
      event:
        | CalendarMonthViewBeforeRenderEvent
        | CalendarWeekViewBeforeRenderEvent
        | CalendarDayViewBeforeRenderEvent
    ) {
      this.period = event.period;
      this.cdr.detectChanges();
    }
    //formatDate(event.datahorafim,'yyyy-MM-ddTHH:mm:ss.sssZ','en-US')
    carregarTeletrabalho(){
      if (this.data.id) {
        this._ausenciaService.getTeletrabalhos(this.data.id).subscribe({
          next: (res:any[]) => {
            const newEvents = res.map(event=>({
                title: "Teletrabalho",
                start: new Date(event.datahorainicio),
                end: new Date(event.datahorafim),
                meta: {event}
              }));
              this.events = [...this.events, ...newEvents];
          },
          error(error) {
            console.log(error);
          },
        });
      }
    }
  }

CalendarioComponent.html #

<div class="alert alert-warning" *ngIf="period?.events?.length === 0">
  There are no events on this {{ view }}
</div>

<div [ngSwitch]="view">
  <mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    [activeDayIsOpen]="true"
    (beforeViewRender)="beforeViewRender($event)"
  >
  </mwl-calendar-month-view>
  <mwl-calendar-week-view
    *ngSwitchCase="'week'"
    [viewDate]="viewDate"
    [events]="events"
    (beforeViewRender)="beforeViewRender($event)"
  >
  </mwl-calendar-week-view>
  <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    (beforeViewRender)="beforeViewRender($event)"
  >
  </mwl-calendar-day-view>
</div>

Api Method（C#） #

[HttpGet("GetTeletrabalhos/{id}")]
public async Task<ActionResult<List<Ausencium>>> GetTeletrabalhos(int id)
{
    try
    {
        var ausencia = await Context.Ausencia.Where(a => a.Utilizadorid == id  && a.Tipoid==2).ToListAsync();
        if (ausencia == null)
        {
            return NotFound();
        }

        return Ok(ausencia);
    }
    catch (Exception e)
    {
        return BadRequest(e);
    }
}

排查与修复方案 #

1. 确认异步数据是否加载成功
   ngOnInit里的console.log(this.events)会在HTTP请求完成前执行，打印的是空数组。把日志移到subscribe的next回调里，确认是否拿到后端数据：

   next: (res:any[]) => {
     const newEvents = res.map(event=>({
         title: "Teletrabalho",
         start: new Date(event.datahorainicio),
         end: new Date(event.datahorafim),
         meta: {event}
       }));
     this.events = [...this.events, ...newEvents];
     console.log('加载到的事件:', this.events); // 移至此处
   },
   

2. 验证日期解析是否正常
   后端返回的datahorainicio和datahorafim可能不是标准日期格式，导致new Date()解析失败。在map里打印原始日期值：

   res.map(event=>{
     console.log('原始日期:', event.datahorainicio, event.datahorafim);
     return {
         title: "Teletrabalho",
         start: new Date(event.datahorainicio),
         end: new Date(event.datahorafim),
         meta: {event}
       }
   })
   

   若解析失败，需确保后端返回ISO 8601格式字符串（如2024-05-20T10:00:00Z），或在前端手动格式化日期。

3. 手动触发变更检测
   异步更新events后，可能需要手动触发变更检测让视图更新：

   next: (res:any[]) => {
     const newEvents = res.map(event=>({
         title: "Teletrabalho",
         start: new Date(event.datahorainicio),
         end: new Date(event.datahorafim),
         meta: {event}
       }));
     this.events = [...this.events, ...newEvents];
     this.cdr.detectChanges(); // 添加此行
   },
   

4. 检查API返回数据的有效性
   在浏览器开发者工具的Network标签中，查看GetTeletrabalhos请求的返回结果，确认是否有符合Utilizadorid和Tipoid筛选条件的数据。

5. 优化模板空值判断
   初始状态下period未定义，可修改模板的无事件提示逻辑：

   <div class="alert alert-warning" *ngIf="events.length > 0 && period?.events?.length === 0">
     当前{{ view }}视图范围内没有事件
   </div>
   

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