ng-fullcalendar 需要仅显示 angular 中具有特定 ID 的事件

Question

我正在尝试使用 ng-fullcalendar 为我的 angular 应用程序创建一个调度程序。我安装它没有任何问题，但我只想从我的 event.service 中呈现一些特定的 ID。这是我的 NgOnInit：

 ngOnInit() {
     this.eventService.getEvents().subscribe(data => {
       console.log(data[0].id);
       this.calendarOptions = {
         editable: true,
         eventLimit: false,
         header: {
           left: 'prev,next today',
           center: 'title',
           right: 'agendaWeek,agendaDay'
         },
         defaultView: 'agendaWeek',
         events: data,
       };
     });
   }

我的 events.service 看起来像：

import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class EventService {
    public getEvents(): Observable<any> {
        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
        let data: any = [{
            id: 999,
            title: 'All Day Event',
            start: yearMonth + '-01'
        },
        {
            id: 998,
            title: 'Long Event',
            start: yearMonth + '-07',
            end: yearMonth + '-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: yearMonth + '-09T16:00:00'
        },
        {
            id: 998,
            title: 'Repeating Event',
            start: yearMonth + '-16T16:00:00'
        }
       ];
        return Observable.of(data);
    }
};

在目前的情况下，所有这些事件都呈现在我的视野中。我需要对此代码进行哪些更改才能仅显示 ID 为“999”的事件。

感谢那些花时间帮助我的人！

Answer 1

您可以使用以下方法进行过滤： data.filter( ev => ev.id == '999');

所以你的ngOnInit会变成这样：

ngOnInit() {
 this.eventService.getEvents().subscribe(data => {
   console.log(data[0].id);
   this.calendarOptions = {
     editable: true,
     eventLimit: false,
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'agendaWeek,agendaDay'
     },
     defaultView: 'agendaWeek',
     events: data.filter( ev => ev.id == '999'),
   };
 });
   }

您也可以从一个空的事件列表开始，然后使用一种方法插入它们。

this._calendar.fullCalendar('renderEvents', #your Filtered events#, true);

ng-fullcalendar 需要仅显示 angular 中具有特定 ID 的事件

ng-fullcalendar need to show only events with specific id's in angular

javascript

fullcalendar

angular