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

Question

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

这是我的组件.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>

我在角度日历文档上复制了相同的示例，但我唯一看到的是加载模板。

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

为什么日历事件上没有加载数据？我做错了什么？

Answer 1

您正在异步分配可观察值。您应该直接设置在模板中订阅的可观察对象。

将代码更改为以下内容：

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

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

  fetchEvents(): void{
    this.events$ = this.hotelService.getHotels().pipe(/*your map*/);
  }

无需订阅。