angular 2 fullcalendar，refetchEvents 不起作用（完整日历不是函数错误）答案

【问题标题】：angular 2 fullcalendar,refetchEvents not working(full calendar is not a function error)angular 2 fullcalendar，refetchEvents 不起作用（完整日历不是函数错误）
【发布时间】：2017-08-02 08:25:43
【问题描述】：

我在我的一个项目中使用 angular 2 fullcalendar。只要我在渲染日历之前准备好数据，一切都可以正常工作。如果触发事件并且数据来自后端，我在使用 refetch 功能时会遇到问题.我将首先解释代码并描述错误。我已经安装了

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)

它给出了一个错误提示

无法读取未定义的属性“nativeElement”

如果我尝试使用

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

它给出了错误

原因：$(...).fullCalendar 不是函数

如果我也使用

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

同样的错误来了。我做错了什么？请帮助。我真的卡住了；

更新

我做到了

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

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

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

  }

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

【问题讨论】：

你什么时候打电话给$(this.myCal.nativeElement)？
我尝试在数据从服务器返回后调用它，当 isDataAvailable 变为 true 时。Dint 工作。我尝试在 ngAfterViewInit 中调用它，它也可以工作
您应该尝试使用@ViewChildren() QueryList 类有一个changes Observable，它将在新元素到达时通知。
可能是一个关于我的代码的小例子，因为我是 QueryList 的新手
好吧，它现在可以工作了，但现在的问题是，它显示带有重复事件的日历。即在第一次刷新时它显示一个事件，在数据更改时它显示两个，等等。任何解决方法？

标签： angular fullcalendar angular2-directives ui-calendar fullcalendar-2

【解决方案1】：

你把它弄得太复杂了：

 @ViewChild('mycal') calendar : CalendarComponent;

然后，只要您想刷新，只需调用：

this.calendar.fullCalendar('refetchEvents');

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

【讨论】：

【解决方案2】：

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

您应该考虑使用@ViewChildren('myCal') 而不是@ViewChild('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);
    })
}

【讨论】：