得到这个错误,真的不想在角度日历上显示事件:https://mattlewis92.github.io/angular-calendar/#/async-events
error_handler.ts:1 ERROR TypeError:无法在MapSubscriber.next(map.ts:75)的MapSubscriber.Subscriber.next(订阅者)中读取MapSubscriber.project(planning.component.ts:100)中未定义的属性“map” . ts:95)在MapSubscriber._next(map.ts:80)的MapSubscriber.Subscriber.next(Subscriber.ts:95),位于ZoneHlep.Reb . zone-mix.js:424)在Zone.webpackJsonp.85.Zone.runTask(区域)的ZoneDelegate.webpackJsonp.85.ZoneDelegate.invokeTask(zone-mix.js:423)的Object.onInvokeTask(ng_zone.ts:280)处-mix.js:191)
component.ts
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
interface Event {
id: number;
title: string;
start: string;
end: string;
}
events$: Observable<Array<CalendarEvent<{ event: Event }>>>;
constructor(private http: Http) { }
ngOnInit(): void {
this.fetchEvents();
}
fetchEvents(): void {
this.events$ = this.http
.get(this.apiUrl)
.map((response) => response.json())
.map(({ results }: { results: Event[] }) => {
return results.map((event: Event) => {
return {
title: event.title,
start: new Date(event.start),
end: new Date(event.end),
color: colors.yellow
};
});
});
}
来自api的json数据
[
{
"id": 2,
"user_id": 1,
"planning_id": 1,
"start": "2017-09-03T22:00:00.000Z",
"end": "2017-09-06T12:33:46.271Z",
"title": "A 3 day event",
"created_at": "2017-09-05 16:39:47",
"updated_at": "2017-09-05 16:39:47"
},
{
"id": 3,
"user_id": 1,
"planning_id": 1,
"start": "2017-09-03T22:00:00.000Z",
"end": "2017-09-06T12:33:46.271Z",
"title": "A 3 day event",
"created_at": "2017-09-07 13:27:36",
"updated_at": "2017-09-07 13:27:36"
}
]
2 回答
您必须导入 Map 运算符:
import 'rxjs/add/operator/map';
我知道它已经过时但我找到了一种方法可以使它与Angular 5一起使用
以这种方式声明事件:
然后使用HttpClient加载数据
请注意,我的API返回了
DateEvent
然后一切都按预期工作