帶有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';