Question

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

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

但是角度日历并没有。

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

服务：

＆＃13;

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());
    } 
}

＆＃13;

组件：

＆＃13;

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

＆＃13;

HTML模板：

＆＃13;

<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>

＆＃13;

Answer 1

我通过检查异步演示获得了它：

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

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

在mattlewis92 angular-calendar

1 个答案: