我在Angular 2中有一个HTTP的问题。
服务类
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 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" ] }
对不起,长的帖子…
我认为你需要导入这:
import 'rxjs/add/operator/map'
或者更一般地说,如果你想有更多的方法观察:
import 'rxjs/Rx';
有关详细信息,请参阅this issue。