在 mattlewis92 angular-calendar 中显示来自 API 的 JSON 事件数据答案

【问题标题】：Displaying JSON event data from API in mattlewis92 angular-calendar在 mattlewis92 angular-calendar 中显示来自 API 的 JSON 事件数据
【发布时间】：2017-07-24 16:17:16
【问题描述】：

我在当前项目中使用https://github.com/mattlewis92/angular-calendar，但无法用它显示我的 JSON 事件。正确获取 API 数据，因为浏览器能够将我的事件显示为列表：

<li *ngFor="let event of events">
    {{event.title}} {{event.start}}
</li>

但角度日历没有。

这是相关代码，也许有人可以告诉我我做错了什么。

服务：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
@Injectable()

export class CalendarService {

    constructor(private http: Http) { }

    getAll() {
        return this.http.get('/events').map((response: Response) => response.json());
    } 
}

组件：

import { Component } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';
import { CalendarService } from '../../../_services/calendar.service';

declare var $: any;


@Component({
    selector: 'app-calendar',
    templateUrl: './cal-overview.component.html',
    styleUrls: ['./cal-overview.component.scss']
})

export class CalendarOverviewComponent {
    view = 'month';
    viewDate: Date = new Date();
    clickedDate: Date;
    events: CalendarEvent[] = [];

    constructor(private calendarService: CalendarService) {
        this.loadAllEvents();
    }
    private loadAllEvents() {
        this.calendarService.getAll().subscribe(
            events => {
                this.events = events;
            });
    }
    eventClicked({ event }: { event: CalendarEvent }): void {
        console.log('Event clicked', event);
    }
}

HTML 模板：

<app-calendar-header
            [(view)]="view"
            [(viewDate)]="viewDate">
 </app-calendar-header>
        <div class="alert alert-info">
            Click on a day on the view.
            <strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
        </div>
        <div [ngSwitch]="view">
            <mwl-calendar-month-view
                *ngSwitchCase="'month'"
                [viewDate]="viewDate"
                [events]="events"
                [activeDayIsOpen]="true"
                (eventClicked)="eventClicked($event)"
                (dayClicked)="clickedDate = $event.day.date">
            </mwl-calendar-month-view>
            <mwl-calendar-week-view
                *ngSwitchCase="'week'"
                [viewDate]="viewDate"
                [events]="events"
                (eventClicked)="eventClicked($event)">
            </mwl-calendar-week-view>
            <mwl-calendar-day-view
                *ngSwitchCase="'day'"
                [viewDate]="viewDate"
                [events]="events"
                (eventClicked)="eventClicked($event)">
            </mwl-calendar-day-view>
        </div>

【问题讨论】：

标签： angular calendar

【解决方案1】：

我通过查看异步演示得到它：

https://github.com/mattlewis92/angular-calendar/tree/master/demos/demo-modules/async-events

请务必不要订阅来自您的 API/服务的返回的 Observable。只需根据您的数据结构使用 .map 并将 Observable 直接传递给您的模板，然后将其与“异步”一起使用。

【讨论】：