angular 2 fullcalendar，refetchEvents无效（完整日历不是函数错误）

Question

我正在为我的一个项目使用angular 2 fullcalendar。只要我在渲染日历之前准备好数据，一切正常。如果事件被触发并且数据来自后端，我在使用重新获取功能时面临问题。我将会首先解释代码并描述错误。 我安装了

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');

  }

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

Answer 1

你太复杂了：

 @ViewChild('mycal') calendar : CalendarComponent;

那么每当你想要刷新时，你只需致电：

this.calendar.fullCalendar('refetchEvents');

我不知道为什么要调用ViewChildren获取一系列日历，因为你的html中只有1个。

Answer 2

那是因为你使用的是*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);
    })
}