Angular 2 HTTP GET与TypeScript错误http.get(…).map不是一个函
发布时间:2020-12-17 09:20:29 所属栏目:安全 来源:网络整理
导读:我在Angular 2中有一个HTTP的问题。 我只想获取一个JSON列表,并在视图中显示它。 服务类 import {Injectable} from "angular2/core";import {Hall} from "./hall";import {Http} from "angular2/http";@Injectable()export class HallService { public http
我在Angular 2中有一个HTTP的问题。
我只想获取一个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; }); } } 但是,我有一个例外:
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。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |