angular 2 fullcalendar，refetchEvents不工作（完整的日历不是函数错误）

我正在使用angular 2 fullcalendar作为我的其中一个项目。只要我在呈现calender之前准备好数据，就可以正常工作。如果事件被触发并且数据来自后端，我在使用refetch函数时遇到了问题。我将首先解释代码并描述错误。我在app.module.tsangular 2 fullcalendar，refetchEvents不工作（完整的日历不是函数错误）

我已经进口

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

安装

npm install fullcalendar 

npm i angular2-fullcalendar 

npm install jquery 

npm install moment

，我已经在声明中宣称：[]在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'); 

    }

现在，当新的数据来源，旧数据不会从视图中删除，但它会附加在现有视图之后。

来源

2017-08-02 Vikhyath Maiya

？ – n00dl3

将数据从服务器回来后，我试着给它，而当isDataAvailable成为true.Dint干活试图调用它ngAfterViewInit作为WEL，它力的工作要么 –

你应该用'@ViewChildren尝试（）''QueryList'类有一个'changes' Observable，它会在新元素到达时通知。 – n00dl3

那是因为你使用的是*ngIf，您的元素可能存在与否。

而不是使用@ViewChild('mycal')的你应该考虑使用@ViewChildren('myCal')和订阅QueryList.changesObservable：

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

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

来源

2017-08-02 14:16:12 n00dl3

你快把它太复杂：

@ViewChild('mycal') calendar : CalendarComponent;

那么每当你想刷新您只需拨打：

this.calendar.fullCalendar('refetchEvents');

我不知道为什么要调用ViewChildren来获取日历数组，看起来你只有1在你的HTML。

当你调用`$（this.myCal.nativeElement）`

来源

2017-12-15 15:50:37

angular 2 fullcalendar，refetchEvents不工作（完整的日历不是函数错误）

回答

相关问题