Angular HTTP GET带有TypeScript错误HTTP . GET(…)。Map不是[null]中的函数

我在Angular中的HTTP有一个问题。

我只是想获得一个JSON列表，并在视图中显示它。

服务类

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}

在HallListComponent中，我从服务中调用getHalls方法:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}

然而，我有一个例外:

TypeError: this.http.get(……)。Map不是[null]中的函数

hall-center.component

import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
    template:`
        <h2>my app</h2>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet],
    providers: [HallService]
})

@RouteConfig([
    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},
    {path: '/hall-list', name: 'HallList', component:HallListComponent}
])

export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
    selector: 'my-app',
    template: `
        <h1>Examenopdracht Factory</h1>
        <a [routerLink]="['HallCenter']">Hall overview</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

当前回答

我尝试了下面的命令，它得到了修复:

npm install rxjs@6 rxjs-compat@6 --save


import 'rxjs/Rx';

2018-12-29 18:30:15

其他回答

只是一些背景知识……新发布的服务器通信开发指南(最后)讨论/提到/解释了这一点:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need. Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method. It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

所以正如@Thierry已经回答的那样，我们可以只引入我们需要的操作符:

import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

或者，如果我们懒得，我们可以引入完整的操作符集。警告:这将添加所有50+运营商到你的应用程序包，并将影响加载时间

import 'rxjs/Rx';

2016-01-27 17:19:58

对于Angular 5及以上版本，更新后的导入行看起来是这样的:

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

此外，这些版本完全支持Pipable操作符，因此您可以轻松使用.pipe()和.subscribe()。

如果你使用的是Angular版本2，那么下面这行代码应该可以正常工作:

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

如果你仍然遇到问题，那么你必须这样做:

import 'rxjs/Rx';

我不喜欢你直接使用它，因为它增加了加载时间，因为它有大量的操作符(有用的和无用的)，这不是一个好的实践，根据行业规范，所以一定要先尝试使用上面提到的导入行，如果这不起作用，那么你应该去rxjs/Rx

2018-05-30 04:51:01

因为angular2中的Http服务返回一个Observable类型，从你的Angular2安装目录(在我的例子中是'node_modules')，我们需要使用http服务在你的组件中导入Observable的map函数，如下所示:

import 'rxjs/add/operator/map';

2017-02-18 10:58:35

全球进口是安全的。

进口“rxjs / Rx”;

2017-12-23 21:20:23

加上@mlc-mlapis所评论的，您混合了可让操作符和原型修补方法。使用其中之一。

对你的案子来说应该是

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class SwPeopleService {
    people$ = this.http.get('https://swapi.co/api/people/')
      .map((res:any) => res.results);

    constructor(private http: HttpClient) {} 
}

https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts

2019-12-31 06:47:07

Angular HTTP GET带有TypeScript错误HTTP . GET(…)。Map不是[null]中的函数

推荐文章

最新文章

标签