带有 TypeScript 错误 http.get(...).map 的 Angular HTTP GET 不是 [null] 中的函数 [英] Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]
问题描述
我在 Angular 中遇到 HTTP 问题.
I have a problem with HTTP in Angular.
我只想 GET
一个 JSON
列表并在视图中显示它.
I just want to GET
a JSON
list and show it in the view.
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
方法:
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;
});
}
}
但是,我有一个例外:
TypeError: this.http.get(...).map 不是 [null] 中的函数
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"
]
}
推荐答案
我认为你需要导入这个:
I think that you need to import this:
import 'rxjs/add/operator/map'
或者更一般地说,如果你想有更多的观察方法.警告:这将导入所有 50 多个运算符并将它们添加到您的应用程序中,从而影响您的包大小和加载时间.
Or more generally this if you want to have more methods for observables. WARNING: This will import all 50+ operators and add them to your application, thus affecting your bundle size and load times.
import 'rxjs/Rx';
有关详细信息,请参阅此问题.
See this issue for more details.
这篇关于带有 TypeScript 错误 http.get(...).map 的 Angular HTTP GET 不是 [null] 中的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!