Angular 无法在事件预览上显示操作按钮¿；我忘了什么？_Angular_Typescript_Angular Calendar

Angular 无法在事件预览上显示操作按钮¿；我忘了什么？

angular typescript

Angular 无法在事件预览上显示操作按钮¿；我忘了什么？,angular,typescript,angular-calendar,Angular,Typescript,Angular Calendar,我正在制作一个angular应用程序，其中包含一个在日历中显示事件的组件，因此我决定使用angular calendar作为视图。在moth视图中，有一个选项显示一天中的所有事件，并允许修改/删除事件。但是，我无法显示操作按钮，因此无法显示相应的对话框角度日历示例屏幕截图：我的应用程序示例屏幕截图：为了实现这一点，我遵循并添加了CalendarEventAction[]和modify和delete选项，并像这样添加到示例事件中（我没有包括所有代码）： calendar.componen

我正在制作一个angular应用程序，其中包含一个在日历中显示事件的组件，因此我决定使用angular calendar作为视图。在moth视图中，有一个选项显示一天中的所有事件，并允许修改/删除事件。但是，我无法显示操作按钮，因此无法显示相应的对话框

角度日历示例屏幕截图：

我的应用程序示例屏幕截图：

为了实现这一点，我遵循并添加了CalendarEventAction[]和modify和delete选项，并像这样添加到示例事件中（我没有包括所有代码）：

calendar.component.ts：

actions: CalendarEventAction[] = [
{
  label: '<i class="fas fa-fw fa-pencil-alt"></i>',
  a11yLabel: 'Edit',
  onClick: ({ event }: { event: CalendarEvent }): void => {
    this.inspectEvent(event)
  },
},
{
  label: '<i class="fas fa-fw fa-trash-alt"></i>',
  a11yLabel: 'Delete',
  onClick: ({ event }: { event: CalendarEvent }): void => {
    this.events = this.events.filter((iEvent) => iEvent !== event);
    this.inspectEvent(event)
  },
}];

events: CalendarEvent[] = [
{
  start: startOfDay(new Date()),
  title: 'First event',
  end: endOfDay(new Date()),
  actions: this.actions,
}];

dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
if (isSameMonth(date, this.viewDate)) {
  if (
    (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
    events.length === 0
  ) {
    this.activeDayIsOpen = false;
  } else {
    this.activeDayIsOpen = true;
  }
  this.viewDate = date;
}

操作：CalendarEventAction[]=[
{
标签：“”，
a11yLabel:“编辑”，
onClick:（{event}:{event:CalendarEvent}）：void=>{
此事件（事件）
},
},
{
标签：“”，
a11yLabel:“删除”，
onClick:（{event}:{event:CalendarEvent}）：void=>{
this.events=this.events.filter（（iEvent）=>iEvent！==event）；
此事件（事件）
},
}];
事件：CalendarEvent[]=[
{
开始：开始日期（新日期（）），
标题：“第一个事件”，
结束：endOfDay（新日期（）），
动作：这个动作，
}];
dayClicked（{date，events}:{date:date；events:CalendarEvent[]}）：无效{
if（isSameMonth（日期，this.viewDate））{
如果(
（isSameDay（this.viewDate，date）和&this.activeDayIsOpen==true）||
events.length==0
) {
this.activeDayIsOpen=false；
}否则{
this.activeDayIsOpen=true；
}
this.viewDate=日期；
}

}

calendar.component.html：

<div class="calendarView" [ngSwitch]="view">
    
        <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" 
        [activeDayIsOpen]="activeDayIsOpen" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (dayClicked)="dayClicked($event.day)" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-month-view>
    
        <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-week-view>
    
        <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-day-view>
    
</div>

但是，按钮没有出现，我不知道是什么问题

有什么建议吗？

由于您的操作按钮是图标按钮，因此需要导入CSS才能使按钮正常工作

您可能忘了在

index.html

的

head

标记中添加

<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>

结果：

如果答案适合您，请投票并将其标记为已接受。