javascript 在Angular 项目中集成全日历

vh0rcniy  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(133)

我在我的angular(15)项目中使用fullcalendar(免费版本(6)).一旦用户点击日历中的某个日期,我需要显示关于这一天的一些信息.因此,我调用一个函数从数据库中检索这些信息,并以模态的形式显示给用户(现在我只是提醒它).
但是调用我的函数时,我得到了错误:
类型"CalendarOptions"上不存在属性"retrieveDataBase"
所以我想知道有没有办法把我的函数集成到fullcalendar中?
P.S.我的数据是巨大的,我不能显示它作为一个事件在不同的日子!
这是我的代码。

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);
      }
    );
  }
}
eivgtgni

eivgtgni1#

尝试用arrow函数替换该回调(这可能导致它基于词法作用域解析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);
      }
    );
  }
}

相关问题