在角度项目中集成全日历答案

【问题标题】：Integrating fullcalendar in angular project在角度项目中集成全日历
【发布时间】：2023-01-06 23:58:11
【问题描述】：

我在我的角度 (15) 项目中使用 fullcalendar（免费版本 (6)）。一旦用户单击日历中的日期，我需要显示有关这一天的一些信息。因此，我调用了一个从数据库中检索此信息的函数，并以模式向用户显示它（现在我只是提醒它）。

但是调用我的函数时出现错误：

“CalendarOptions”类型上不存在属性“retrieveDataBase”

所以我想知道有没有办法将我的功能集成到fullcalendar中？

附言我的数据很大，我无法在不同的日子将其显示为一个事件！

这是我的代码。
export class someComponent {

  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin],          
    dateClick: function(info) {                    
      this.retrieveDataBase(info.dateStr);  // Gives error!                    
    },
  }
        
  retrieveDataBase(date: string):void{  
    this.dummyService.getdb(date).subscribe(
      (response: any) => {
        const { results } = response;
        alert(results);
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

【问题讨论】：

retrieveDataBase 不是 calendarOptions 对象的一部分。这就是错误告诉你的。请记住，当您运行该代码时，您在 CalendarOptions 中，因此 this 指向 calendaroptions 对象。

标签： javascript angular fullcalendar fullcalendar-6

【解决方案1】：

尝试用箭头函数替换该回调（这可能会导致它根据词法范围解析 this，然后引用该类）：

export class someComponent {

  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin],          
    dateClick: (info) => {                    
      this.retrieveDataBase(info.dateStr);   
    },
  }
        
  retrieveDataBase(date: string):void{  
    this.dummyService.getdb(date).subscribe(
      (response: any) => {
        const { results } = response;
        alert(results);
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

【讨论】：