angular 2 fullcalendar,refetchEvents 不工作（full calendar is not a function error）

Question

我正在为我的 projects.everything 之一使用 angular 2 fullcalendar，只要我在呈现 calender.If 事件被触发并且数据来自后端，我在使用 refetch function.I 时遇到问题，将首先解释代码并描述错误。我已经安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

在app.module.ts

我已经导入了

import {CalendarComponent} from "angular2-fullcalendar/src/calendar/calendar";

我在声明中声明：[]

在 html 我正在使用

显示日历

<div class="ui red segment" *ngIf="dataAvailable">
<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal>
</angular2-fullcalendar>
</div>

在我的组件中

import {CalendarComponent} from 'angular2-fullcalendar/src/calendar/calendar';
import {Options} from 'fullcalendar';

declare var $:any;
import * as moment from "moment";

而且我有一个像

这样的标签的引用

 @ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;

我的日历配置看起来像

 calOptions: any = {
        height:350,
        defaultDate: moment(new Date(),'YYYY-MM-DD'),
        editable: false,
        stick:true,
        
        events:this.events,
        selectable:false,
        eventLimit: true, // allow "more" link when too many events
        header: {
                  left: 'month basicWeek basicDay',
                  center: 'title',
                  right: 'today prev,next'
                },
        displayEventTime: false,
        addEventSource:this.events,
        defaultView:'basicWeek',
       
        dayRender: (date, cell)=> {
                        var today = moment().format("YYYY-MM-DD");
                    //    today = moment(today).toDate();
                        
                        for(let item of this.holidayList){
                        
                        if(item.holidayDate === moment(date).format("YYYY-MM-DD"))
                        {
                         cell.css("background-color", "#e4564a");
                         
                        }
                        }
          } 
  };

问题

现在当我尝试新数据时

$(this.myCal.nativeElement).fullCalendar('addEventSource', events)

报错说

Cannot read property 'nativeElement' of undefined

如果我尝试使用

$('#mycal').fullCalendar('refetchEventSources',this.events);

它给出了错误

caused by: $(...).fullCalendar is not a function

如果我使用

$('angular2-fullcalendar').fullCalendar('refetchEventSources',this.events);

同样的错误comes.What我做错了吗？请问help.I我真的卡住了；

更新

我做到了我做到了

@ViewChildren('mycal') cal: QueryList<CalendarComponent>

在新数据到来后，在我做的订阅方法中，

this.cal.forEach(div => 
  {
    div.fullCalendar('removeEventSource', this.events);
     div.fullCalendar('addEventSource', this.events);
      div.fullCalendar('refetchEvents');

  }

现在当新数据到来时，旧数据不会从视图中删除，而是会附加到现有视图中。

Answer 1

那是因为您使用的是 *ngIf，您的元素可能存在也可能不存在。

而不是使用 @ViewChild('mycal') 您应该考虑使用 @ViewChildren('myCal') 并订阅 QueryList.changes Observable:

@ViewChildren('myCal')
cal: QueryList < ElementRef > ;

ngAfterViewInit() {
  this.cal.changes
    .startWith(this.cal)
    .filter(list => list.length > 0)
    .subscribe(list => {
      console.log(list.first);
    })
}

Answer 2

你把事情搞得太复杂了：

 @ViewChild('mycal') calendar : CalendarComponent;

然后每当你想刷新你只需调用：

this.calendar.fullCalendar('refetchEvents');

我不知道为什么要调用 ViewChildren 来获取一组日历，而您的 html 中似乎只有 1 个日历。

angular 2 fullcalendar,refetchEvents 不工作（full calendar is not a function error）

angular 2 fullcalendar,refetchEvents not working(full calendar is not a function error)

fullcalendar

angular2-directives

ui-calendar

angular

fullcalendar-2