在自定义单元格模板上加载异步事件时出现 Angular-Calendar 问题

问：

我正在开发一个应用程序，该应用程序可以在使用 angular-calendar 生成的日历上显示酒店房间的每日价格。

这是我的component.ts：

  events$!: Observable<CalendarEvent<{ hotel: Hotel }>[]>

  ngOnInit(): void {
    this.fetchEvents()
  }

  fetchEvents(): void{
    this.hotelService.getHotels().pipe(
      map((hotels: Hotel[]) => {
        const events: CustomCalendarEvent[] = [];
        hotels.forEach(hotel => {
          if (hotel.rooms.single) {
            hotel.rooms.single.daily_prices.forEach(element => {
              events.push({
                start: new Date(element.start),
                price: element.price,
                title: '',
                allDay: true,
              })
            })
          }
        })
        return events
      })
    ).subscribe(events => {
      this.events$ = of(events)
      console.log(events)
    })
  }

在这里，我使用服务获取所有数据，我控制台记录了可观察对象，以查看数据是否显示并且正确显示。所以我想问题出在我的 HTML 上：

<ng-template #customCellTemplate let-day="day" let-locale="locale" class="cell">
    <div class="cal-cell-top">
        <span class="cal-day-number">
            {{ day.date | calendarDate:'monthViewDayNumber':locale }}
        </span>
    </div>
    <small class="price-cell">
        Precio habitación:
        <br>
        <strong>{{ day.events$ }}</strong>
    </small>
</ng-template>

<ng-template #loading>
    <div class="text-center">
      <i class="fas fa-spin fa-spinner fa-5x"></i> <br />
      Loading events...
    </div>
</ng-template>

<div *ngIf="events$ | async; else loading; let events">
    <div [ngSwitch]="view">
        <mwl-calendar-month-view
            *ngSwitchCase="'month'"
            [viewDate]="viewDate"
            [locale]="locale"
            [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays"
            [cellTemplate]="customCellTemplate"
            [events]="events">
        </mwl-calendar-month-view>
    </div>
</div>

我在angular-calendar文档上复制了相同的示例，但我唯一看到的是加载模板。

我还尝试对一些事件进行硬编码，并且数据在每个单元格上都正确显示，所以这就是为什么我想问题在于异步收集数据

为什么数据未加载到日历事件中？我做错了什么？