带有TypeScript错误http.get（…）.map的角度HTTP GET不是[null]中的函数

我在Angular中遇到HTTP问题。

我只想GET一个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]中的函数

霍尔中心组件

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

应用组件

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"
  ]
}

#1楼

我认为您需要导入以下内容：

import 'rxjs/add/operator/map'

或更笼统地说，如果您想拥有更多可观察的方法。 警告：这将导入所有50多个运算符，并将它们添加到您的应用程序中，从而影响捆绑包的大小和加载时间。

import 'rxjs/Rx';

有关更多详细信息，请参见此问题。

#2楼

直接使用Observable.subscribe应该可以。

@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

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

    getHalls() {
    // ########### No map
           return this.http.get(HallService.PATH + 'hall.json');
    }
}


export class HallListComponent implements OnInit {
    public halls:Hall[];
    / *** /
    ngOnInit() {
        this._service.getHalls()
           .subscribe(halls => this.halls = halls.json()); // <<--
    }
}

#3楼

只是一些背景...新创建的Server Communication开发指南（最后）讨论/提及/解释了以下内容：

RxJS库很大。当我们构建生产应用程序并将其部署到移动设备时，大小很重要。我们应该只包括我们实际需要的那些功能。

因此，Angular在rxjs/Observable模块中公开了Observable的精简版本，该版本几乎缺少所有运算符，包括我们想在此处使用的运算符，例如map方法。

由我们决定添加所需的运算符。我们可以一个接一个地添加每个运算符，直到我们有一个精确地调整到我们要求的自定义Observable实现。

因此，正如@Thierry已经回答的那样，我们只需引入所需的运算符即可：

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

或者，如果我们很懒，我们可以引入全套运算符。 警告：这会将所有50多个运算符添加到您的应用包中，并且会影响加载时间

import 'rxjs/Rx';

#4楼

由于angular2中的 Http服务返回的是Observable类型，因此从您的Angular2安装目录（本例中为'node_modules'），我们需要使用http服务将Observable的map函数导入到您的组件中 ，如下所示：

import 'rxjs/add/operator/map';

#5楼

您在此处使用的地图不是javascript中的.map() ，而是Rxjs地图函数， Observables在Angular中使用Observables 。

因此，在这种情况下，如果您想在结果数据上使用map，则需要将其导入...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R>将给定的项目函数应用于源Observable发出的每个值，并将结果值作为Observable发出。

因此，只需像这样导入：

import 'rxjs/add/operator/map';

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3192866

标签

rxjs

typescript

angular2