Question

嗨，我是Angular的新手，正在尝试使用MEAN stack。我安装成功，安装正常。我试图在项目中使用angular calendar。我安装了角度日历所需的库，但显示了此error：

TypeError：未定义不是函数（在'... Rx_1.map ...'附近）

我错过的事情，请指导我我所错过的事情。

我的systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',


            // other libraries

            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            'angular-calendar': 'npm:angular-calendar/bundles/angular-calendar.umd.js',
            'calendar-utils': 'npm:calendar-utils/dist/umd/calendar-utils.js',
            'angular-resizable-element': 'npm:angular-resizable-element/bundles/angular-resizable-element.umd.js',
            'angular-draggable-droppable': 'npm:angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js',
            'date-fns': 'npm:date-fns',
            'positioning': 'npm:positioning/dist/umd/positioning.js',
            '@ng-bootstrap':              'npm:@ng-bootstrap',
            '@ng-bootstrap/ng-bootstrap':'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'tslib': 'npm:tslib/tslib.js',


        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'date-fns': {
                main: './index.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js',
                main: 'Rx.js'
            },
            'angular-in-memory-web-api': {
              main: './index.js',
              defaultExtension: 'js'
            },
            'date-fns': {
              main: './index.js',
              defaultExtension: 'js'
            },
        }
    });
})(this);

我的home.component.ts

    import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
    import { HttpClient, HttpParams } from '@angular/common/http';
    import 'rxjs/add/operator/map';
    import { User } from '../_models/index';
    import { UserService } from '../_services/index';
    import { CalendarEvent } from 'angular-calendar';

import { Observable} from 'rxjs'
import { merge } from 'rxjs/observable/merge';
import { map } from 'rxjs/operators'
    import {
      isSameMonth,
      isSameDay,
      startOfMonth,
      endOfMonth,
      startOfWeek,
      endOfWeek,
      startOfDay,
      endOfDay,
      format
    } from 'date-fns';
    import { colors } from '../demo-utils/colors';

    interface Film {
      id: number;
      title: string;
      release_date: string;
    }

    @Component({
        moduleId: module.id,
        selector: 'mwl-demo-component',
        changeDetection: ChangeDetectionStrategy.OnPush,
        templateUrl: 'home.component.html'
    })

    export class HomeComponent implements OnInit {
        currentUser: User;
        users: User[] = [];

        constructor(private userService: UserService, private http: HttpClient) {
            this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        }

        ngOnInit() {
            this.loadAllUsers();
            this.fetchEvents();
        }

        deleteUser(_id: string) {
            this.userService.delete(_id).subscribe(() => { this.loadAllUsers() });
        }

        private loadAllUsers() {
            this.userService.getAll().subscribe(users => { this.users = users; });
        }


        view: string = 'month';

      viewDate: Date = new Date();

      events$: Observable<Array<CalendarEvent<{ film: Film }>>>;

      activeDayIsOpen: boolean = false;

      fetchEvents(): void {
        const getStart: any = {
          month: startOfMonth,
          week: startOfWeek,
          day: startOfDay
        }[this.view];

        const getEnd: any = {
          month: endOfMonth,
          week: endOfWeek,
          day: endOfDay
        }[this.view];

        const params = new HttpParams()
          .set(
            'primary_release_date.gte',
            format(getStart(this.viewDate), 'YYYY-MM-DD')
          )
          .set(
            'primary_release_date.lte',
            format(getEnd(this.viewDate), 'YYYY-MM-DD')
          )
          .set('api_key', '0ec33936a68018857d727958dca1424f');

        this.events$ = this.http
          .get('https://api.themoviedb.org/3/discover/movie', { params })
          .pipe(
            map(({ results }: { results: Film[] }) => {
              return results.map((film: Film) => {
                return {
                  title: film.title,
                  start: new Date(film.release_date),
                  color: colors.yellow,
                  meta: {
                    film
                  }
                };
              });
            })
          );
      }

      dayClicked({
        date,
        events
      }: {
        date: Date;
        events: Array<CalendarEvent<{ film: Film }>>;
      }): void {
        if (isSameMonth(date, this.viewDate)) {
          if (
            (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
            events.length === 0
          ) {
            this.activeDayIsOpen = false;
          } else {
            this.activeDayIsOpen = true;
            this.viewDate = date;
          }
        }
      }

      eventClicked(event: CalendarEvent<{ film: Film }>): void {
        window.open(
          `https://www.themoviedb.org/movie/${event.meta.film.id}`,
          '_blank'
        );
      }
    }

enter image description here

我试图搜索如何解决此错误，但没有得到适当的解决方案。请建议我如何解决此问题。预先感谢。

Answer 1

您似乎是从错误的位置导入地图，请将其拆分：

import { map, Observable} from 'rxjs/Rx'

对此：

import { Observable} from 'rxjs'
import { merge } from 'rxjs/observable/merge';
import { map } from 'rxjs/operators'

如何解决Angular中的Rx_1.map错误？

1 个答案: