角2 HTTP GET与打字稿错误http.get（...）。地图是不是在一个函数[空] [英] Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

问题描述

我在与HTTP问题角2 。

我只想 GET A JSON 列表，并显示在视图中。

服务类

 进口{}注射从angular2 /芯;
进口{}馆从./hall
从angular2 / HTTP进口{}的Http;
@Injectable（）
出口类HallService {
    公共HTTP是：http;
    公共静态路径：字符串='应用程序/后端/    构造函数（HTTP：HTTP）{
        this.http = HTTP;
    }    getHalls（）{
           返回this.http.get（HallService.PATH +'hall.json'）图（（RES：响应）=＆GT; res.json（））;
    }
}
 

而在 HallListComponent 我称之为从服务 getHalls 方法：

 出口类HallListComponent实现的OnInit {
    文化馆：霍尔[];
    公共_selectedId：数;    构造函数（私人_router：路由器，
                私人_routeParams：RouteParams，
                私人_Service：HallService）{
        this._selectedId = + _routeParams.get（'身份证'）;
    }    ngOnInit（）{
        。this._service.getHalls（）认购（（大厅：大厅[]）=＆GT; {
            this.halls =大厅;
        }）;
    }
}
 

不过，我有一个例外：

  

类型错误：this.http.get（...）地图是不是在一个函数[空]

霍尔center.component

 进口{}组件从angular2 /芯;
进口{} RouterOutlet从angular2 /路由器;
进口{} HallService从./hall.service
进口{} RouteConfig从angular2 /路由器;
进口{} HallListComponent从./hall-list.component
进口{} HallDetailComponent从./hall-detail.component
@零件（{
    模板：`
        ＆LT; H2＆gt;我的应用程序＆LT; / H＆GT;
        ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
    `
    指令：[RouterOutlet]
    供应商：[HallService]
}）@RouteConfig（[
    {路径：'/'，名称：'HallCenter'，成分：HallListComponent，useAsDefault：真正}，
    {路径：'/霍尔名单，名称：'HallList'，成分：HallListComponent}
]）出口类HallCenterComponent {}
 

app.component

 进口{}组件从angular2 /核心;
进口{} ROUTER_DIRECTIVES从angular2 /路由器;
进口{} RouteConfig从angular2 /路由器;
进口{} HallCenterComponent从./hall/hall-center.component
@零件（{
    选择：我的应用，
    模板：`
        ＆LT; H1＆GT; Examenopdracht工厂和LT; / H1＆GT;
        ＆LT; A [routerLink] =['HallCenter']＆GT;展馆概貌和LT; / A＆GT;
        ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
    `
    指令：[ROUTER_DIRECTIVES]
}）@RouteConfig（[
    {路径：'/霍尔中心/ ...'，名称：'HallCenter'，成分：HallCenterComponent，useAsDefault：真正}
]）
出口类AppComponent {}
 

tsconfig.json

  {
  compilerOptions：{
    目标：ES5
    模块：系统
    moduleResolution：节点，
    sourceMap：真实，
    emitDecoratorMetadata：真实，
    experimentalDecorators：真实，
    removeComments：假的，
    noImplicitAny：假的
  }，
  排除：[
    node_modules
  ]
}
 

很抱歉的长期职位...

解决方案

我认为你需要导入这样的：

 进口'rxjs /添加/运营/图
 

或更普遍的这个，如果你想有更多的观测方法：

 进口'rxjs /接收';
 

请参阅这个问题了解更多详情。

I have a problem with HTTP in Angular 2.

I just want to GET a JSON list and show it in the view.

Service class

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());
    }
}

And in the HallListComponent I call the getHalls method from the service:

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;
        });
    }
}

However, I got an EXCEPTION:

TypeError: this.http.get(...).map is not a function in [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"
  ]
}

Sorry for the long post...

解决方案

I think that you need to import this:

import 'rxjs/add/operator/map'

Or more generally this if you want to have more methods for observables:

import 'rxjs/Rx';

See this issue for more details.

这篇关于角2 HTTP GET与打字稿错误http.get（...）。地图是不是在一个函数[空]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！