在TypeScript中使用Angular进行HTTP GET时，出现了错误“http.get(...).map不是[null]中的函数”。

45 浏览
0 Comments

在TypeScript中使用Angular进行HTTP GET时，出现了错误“http.get(...).map不是[null]中的函数”。

我在Angular中遇到了HTTP问题。

我只想GET一个JSON列表并在视图中显示它。

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());
    }
}

在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]中不是一个函数。

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 {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"
  ]
}

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

一些背景... 新近发布的Server Communication开发指南（终于）讨论/提到/解释了以下内容：

RxJS库相当大。当我们构建生产应用程序并将其部署到移动设备时，大小很重要。我们应该只包含我们实际需要的那些功能。

因此，Angular在rxjs/Observable模块中公开了一个精简版本的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';

0
0 Comments

我认为你需要引入这个：

import 'rxjs/add/operator/map'

或者更一般地说，如果你想要更多的可观察方法，可以引入以下代码。
警告：这将导入50多个运算符，并将它们添加到您的应用程序中，因此影响您的包大小和加载时间。

import 'rxjs/Rx';

有关更多详细信息，请参见此问题。

0