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不工作（完整的日曆不是函數錯誤）

回答

相關問題