错误类型错误：无法读取未定义的属性“地图”答案

【问题标题】：ERROR TypeError: Cannot read property 'map' of undefined错误类型错误：无法读取未定义的属性“地图”
【发布时间】：2018-02-17 03:21:29
【问题描述】：

得到这个错误，真的不明白为什么.. 我正在尝试在 angular-calendar 上显示事件：https://mattlewis92.github.io/angular-calendar/#/async-events

error_handler.ts:1 错误类型错误：无法读取属性“地图” 不明确的在 MapSubscriber.project (planning.component.ts:100) 在 MapSubscriber._next (map.ts:75) 在 MapSubscriber.Subscriber.next (Subscriber.ts:95) 在 MapSubscriber._next (map.ts:80) 在 MapSubscriber.Subscriber.next (Subscriber.ts:95) 在 XMLHttpRequest.onLoad (xhr_backend.ts:99) 在 ZoneDelegate.webpackJsonp.85.ZoneDelegate.invokeTask (zone-mix.js:424) 在 Object.onInvokeTask (ng_zone.ts:280) 在 ZoneDelegate.webpackJsonp.85.ZoneDelegate.invokeTask (zone-mix.js:423) 在 Zone.webpackJsonp.85.Zone.runTask (zone-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"
}
]

【问题讨论】：

标签： angular typescript

【解决方案1】：

就我而言，我必须将 typescript 从 typescript@3.x.x 升级到 typescript@4.x.x。

这个错误是怎么来的？我将我的 Angular 应用程序从 angular@10 升级到了 angular@11。

【讨论】：

【解决方案2】：

删除node_module 并运行npm install。它解决了我的问题

【讨论】：

【解决方案3】：

ng 更新
ng 更新@angular/cli
ng 更新@angular/core

【讨论】：

【解决方案4】：

我知道它已经过时了，但我找到了一种让它与 Angular 5 一起工作的方法

以这种方式声明事件：

asyncEvents$: Observable<CalendarEvent[]>;

然后使用 HttpClient 加载您的数据

请注意，我的 API 返回了 DateEvent

loadEvents() {
    this.asyncEvents$ = this.http.get<DateEvent[]>(YOUR_URL) 
      .map(res => { 
        return res.map(event => { 
          return {
              title: event.label,
              start: new Date(event.startDate),
              color: {primary: event.color, secondary: "#D1E8FF"},
              meta: {
                event
              },
              allDay: true
            };
        });
      });
  }

然后一切都按预期进行

【讨论】：

我收到TypeError: res.map is not a function at MapSubscriber.eval
确保从 'rxjs/operators/map' 导入 { map };
是导入的。我的问题here 了解更多详情

【解决方案5】：

你必须导入地图操作符：

import 'rxjs/add/operator/map';

【讨论】：

是的，已经完成了。感谢我在示例中添加的精确度。
我仍然被这个问题困扰。我已经搜索了一些可行的替代方案，但出于我的好奇心，我想知道这个问题的原因。
@mchev 你找到解决方案了吗？我的问题here