debugjavascriptangularCritical
Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]
Viewed 0 times
angulartypescripterrorwithfunctionnotnullhttpgetmap
Problem
I have a problem with HTTP in Angular.
I just want to
Service class
And in the
However, I got an exception:
TypeError: this.http.get(...).map is not a function in [null]
hall-center.component
app.component
```
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterCompo
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:`
my app
`,
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 {HallCenterCompo
Solution
I think that you need to import this:
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.
See this issue for more details.
import 'rxjs/add/operator/map'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.
Code Snippets
import 'rxjs/add/operator/map'import 'rxjs/Rx';Context
Stack Overflow Q#34515173, score: 541
Revisions (0)
No revisions yet.