Angular 14+日历日视图自定义模板报错：无法读取event属性

正在为Angular 14.0+ Calendar创建自定义日事件模板，但日视图中事件返回undefined，日历的常规月视图运行正常。

HTML代码 #

<div [ngSwitch]="view">
    <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [cellTemplate]="CUSTOM_CELL_TEMPLATE" [refresh]="refresh"></mwl-calendar-month-view>
    <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [eventTemplate]="defaultTemplate" [refresh]="refresh"></mwl-calendar-day-view>
</div>

正常工作的月视图模板 #

<ng-template #CUSTOM_CELL_TEMPLATE let-day="day" let-locale="locale">
    <div class="cal-cell-top">
        <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{day.badgeTotal}}</span>
        <span class="cal-day-number">{{day.date | calendarDate:'monthViewDayNumber':locale}}</span>
    </div>
    <div style="max-height: 76px; overflow-x: hidden; overflow-y: auto;">
        <div class="customCellRow" *ngFor="let event of day.events">
            <div class="mx-1 d-flex" (click)="openScheduleItemModal(event.meta.scheduleItem);">
                <fa-icon [icon]="getScheduleItemTypeIcon(event.meta.scheduleItem.type)" class="my-auto" [size]="(isMobile) ? 'xs' : 'sm'" [style.color]="event.color.primary"></fa-icon>
                <small class="ms-1 my-auto h-fit w-100 d-flex flex-column">
                    <span style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 85%;">{{event.title}}</span>
                    <strong *ngIf="event.meta.scheduleItem.clientId" style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 85%;">{{event.meta.scheduleItem.clientName}}</strong>
                </small>
            </div>
        </div>
    </div>
</ng-template>

无法正常工作的日视图模板 #

<ng-template 
#defaultTemplate 
let-dayEvent="dayEvent" 
let-tooltipPlacement="tooltipPlacement" 
let-eventClicked="eventClicked" 
let-tooltipTemplate="tooltipTemplate" 
let-tooltipAppendToBody="tooltipAppendToBody"> 
<div 
  class="cal-event" > 
  <mwl-calendar-event-actions 
    [event]="dayEvent.event" 
    [customTemplate]="eventActionsTemplate"> 
  </mwl-calendar-event-actions> 
  &ngsp; 
  <mwl-calendar-event-title 
    [event]="dayEvent.event" 
    [customTemplate]="eventTitleTemplate" 
    view="day"> 
  </mwl-calendar-event-title> 
</div> 
</ng-template>

错误信息 #

报错内容：TypeError: 无法读取未定义的属性（读取“event”）

问题原因及解决方法 #

Angular Calendar日视图的eventTemplate输入上下文直接传递的是单个事件对象，变量名应为event，而非你使用的dayEvent。错误地使用let-dayEvent="dayEvent"导致dayEvent为undefined，进而触发读取dayEvent.event的报错。

修改后的日视图模板如下：

<ng-template 
#defaultTemplate 
let-event="event" 
let-tooltipPlacement="tooltipPlacement" 
let-eventClicked="eventClicked" 
let-tooltipTemplate="tooltipTemplate" 
let-tooltipAppendToBody="tooltipAppendToBody"> 
<div 
  class="cal-event" > 
  <mwl-calendar-event-actions 
    [event]="event" 
    [customTemplate]="eventActionsTemplate"> 
  </mwl-calendar-event-actions> 
  &ngsp; 
  <mwl-calendar-event-title 
    [event]="event" 
    [customTemplate]="eventTitleTemplate" 
    view="day"> 
  </mwl-calendar-event-title> 
</div> 
</ng-template>

补充说明 #

月视图的cellTemplate上下文是包含events数组的day对象，因此使用let-day="day"是正确的；但日视图的eventTemplate是针对单个事件的渲染模板，上下文直接提供事件本身，无需额外嵌套访问。

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