我在Angular中遇到HTTP问题.

我只想要GET一个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;
        });
    }
}

但是,我有一个例外:

TypeError:this.http.get(...).map不是[null]中的函数

霍尔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 {HallCenterComponent} from "./hall/hall-center.component";
@Component({
    selector: 'my-app',
    template: `
        
Examenopdracht Factory
        Hall overview
        
    `,
    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"
  ]
}

Thierry Temp.. 530

我认为你需要导入这个:

import 'rxjs/add/operator/map'

或者更常见的是,如果您想要有更多可观察方法. 警告:这将导入所有50多个操作员并将其添加到您的应用程序中,从而影响您的软件包大小和加载时间.

import 'rxjs/Rx';

有关详细信息,请参阅此问题.

1> Thierry Temp..：

---

我认为你需要导入这个:

import 'rxjs/add/operator/map'

或者更常见的是,如果您想要有更多可观察方法. 警告:这将导入所有50多个操作员并将其添加到您的应用程序中,从而影响您的软件包大小和加载时间.

import 'rxjs/Rx';

有关详细信息,请参阅此问题.

---

请不要使用'import'rxjs/Rx';' 因为它导入了所有内容,而rxjs往往相当大.根据需要逐个导入操作员.

---

@OnurYıldırım,使用rc.4,仍然需要导入,除非我做错了.

2> Mark Rajcok..：

---

只是一些背景......最新的服务器通信开发指南(最后)讨论/提及/解释这个:

RxJS库非常大.在构建生产应用程序并将其部署到移动设备时,大小很重要.我们应该只包括我们实际需要的那些功能.

因此,角暴露了一个精简版Observable的的rxjs/Observable模块,缺乏几乎所有的运营商,包括我们想在这里用如的那些版本的map方法.

由我们来添加我们需要的运算符.我们可以逐个添加每个运算符,直到我们根据我们的要求调整了自定义Observable实现.

所以@Thierry已经回答了,我们可以直接引入我们需要的运营商:

import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

或者,如果我们懒惰,我们可以拉入全套操作员.警告:这会将所有50多个运营商添加到您的应用包中,并将影响加载时间

import 'rxjs/Rx';

---

import'rxjs/Rx'; 哇.我所有的头发都会瞬间消失.我无法相信Rxjs/Angular2不会在世界各地打印出来.谢谢!!!

3> Sachila Rana..：

---

从rxjs 5.5开始,您可以使用可管道运算符

import { map } from 'rxjs/operators';

有什么问题 import 'rxjs/add/operator/map';

当我们使用这种方法时,map操作符将被修补observable.prototype 并成为此对象的一部分.

如果稍后,您决定map从处理可观察流的代码中删除运算符但未能删除相应的import语句,则实现的代码map仍然是其中的一部分Observable.prototype.

当捆绑包试图消除未使用的代码(又名 tree shaking)时,map即使它没有在应用程序中使用,它们也可能决定将运算符的代码保留 在Observable中.

方案 -Pipeable operators

可管理运算符是纯函数,不修补Observable.您可以使用ES6导入语法导入运算符import { map } from "rxjs/operators",然后将它们包装到一个pipe()带有可变数量参数的函数中,即可链式运算符.

像这样的东西:

getHalls() {
    return this.http.get(HallService.PATH + 'hall.json')
    .pipe(
        map((res: Response) => res.json())
    );
}

4> Claudiu..：

---

使用Angular 5,RxJS导入得到改进.

代替

import 'rxjs/add/operator/map';

我们现在可以

import { map } from 'rxjs/operators';

5> TheKojuEffec..：

---

Observable.subscribe直接使用应该工作.

@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
    // ########### No map
           return this.http.get(HallService.PATH + 'hall.json');
    }
}


export class HallListComponent implements OnInit {
    public halls:Hall[];
    / *** /
    ngOnInit() {
        this._service.getHalls()
           .subscribe(halls => this.halls = halls.json()); // <<--
    }
}

---

这不是一种非常有效的方法.例如,如果有多个订阅者,他们将不得不在数据上运行映射,而不是仅在服务中执行一次.我认为OP有正确的方法,只是没有加载正确的模块来使用它.