带有 TypeScript 错误的 Angular HTTP GET http.get(...).map 不是 [null] 中的函数

Question

我在 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] 中的函数

大厅中心组件

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

Answer 1

我认为你需要导入这个：

import 'rxjs/add/operator/map'

或者更一般地说，如果您想为可观察对象提供更多方法。 警告：这将导入所有 50 多个运算符并将它们添加到您的应用程序中，从而影响您的包大小和加载时间。

import 'rxjs/Rx';

更多详情请见this issue。

Answer 2

只是一些背景... 新创建的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';

Answer 3

从 rxjs 5.5 开始，你可以使用 pipeable 操作符

import { map } from 'rxjs/operators';

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

当我们使用这种方法时，map 运算符将被修补为observable.prototype 并成为该对象的一部分。

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

当打包程序试图消除未使用的代码（aka tree shaking）时，他们可能会决定将 map 运算符的代码保留在 Observable 中，即使它没有在 Observable 中使用。应用。

解决方案 - Pipeable operators

Pipeable 运算符是纯函数，不会修补 Observable。您可以使用 ES6 导入语法 import { map } from "rxjs/operators" 导入运算符，然后将它们包装到一个函数 pipe() 中，该函数采用可变数量的参数，即可链接的运算符。

类似这样的：

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

Answer 4

Angular 5 改进了 RxJS 导入。

代替

import 'rxjs/add/operator/map';

我们现在可以

import { map } from 'rxjs/operators';

Answer 5

直接使用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()); // <<--
    }
}

Answer 6

对于 Angular 5 及更高版本，更新后的导入行如下所示：

import { map } from 'rxjs/operators';

或

import { map } from 'rxjs/operators';

此外，这些版本完全支持 Pipable Operators，因此您可以轻松使用 .pipe() 和 .subscribe()。

如果您使用的是 Angular 版本 2，那么以下行应该可以正常工作：

import 'rxjs/add/operator/map';

或

import 'rxjs/add/operators/map';

如果你仍然遇到问题，那么你必须去：

import 'rxjs/Rx';

我不希望你直接使用它，因为它会增加加载时间，因为它有大量的运算符（有用的和无用的），根据行业规范，这不是一个好的做法，所以请确保您首先尝试使用上述导入行，如果这不起作用，那么您应该使用 rxjs/Rx

Answer 7

我有办法解决这个问题

安装这个包：

npm install rxjs@6 rxjs-compat@6 --save

然后导入这个库

import 'rxjs/add/operator/map'

最后重启你的 ionic 项目然后

ionic serve -l

Answer 8

您在这里使用的 ma​​p 不是 javascript 中的 .map()，它是 Rxjs 映射函数，它在 Angular 中作用于 Observables...

所以在这种情况下，如果您想在结果数据上使用地图，则需要导入它...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> 将给定的项目函数应用于每个发出的值 由源 Observable 发出，并将结果值作为 可观察。

所以只需像这样导入它：

import 'rxjs/add/operator/map';

Answer 9

Angular 版本 6“0.6.8” rxjs 版本 6 "^6.0.0"

此解决方案适用于：

  "@angular-devkit/core": "0.6.8",
  "rxjs": "^6.0.0"

众所周知，Angular 每天都在开发，所以每天都有很多变化，这个解决方案适用于 Angular 6 和 rxjs 6
首先使用 http 哟应该从以下位置导入它： 毕竟你必须在 app.module.ts 中声明 HttpModule

import { Http } from '@angular/http';

你必须将 HttpModule 添加到 Ngmodule -> imports

  imports: [
    HttpModule,
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

第二个使用地图你应该首先导入管道：

import { pipe } from 'rxjs';

第三个你需要从地图函数导入：

import { map } from 'rxjs/operators';

你必须像这个例子一样在管道内使用地图：

 constructor(public http:Http){  }

    getusersGET(){
        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(
         map(res => res.json()  )  );
    }

效果很好，祝你好运！

Answer 10

由于 angular2 中的 Http 服务返回一个 Observable 类型， 从你的Angular2安装目录（在我的例子中是'node_modules'），我们需要使用http服务在你的组件中导入Observable的map函数，如：

import 'rxjs/add/operator/map';

Answer 11

Angular 6 - 只有 import 'rxjs/Rx' 对我有用

Answer 12

只需在文件中添加该行，

导入'rxjs/Rx';

它将导入一堆依赖项。在 Angular 5 中测试

Answer 13

没错，RxJs 已将其 map 运算符分离到一个单独的模块中，现在您需要像任何其他运算符一样显式导入它。

import rxjs/add/operator/map;

你会没事的。

Answer 14

全局导入是安全的。

导入'rxjs/Rx';

Answer 15

import 'rxjs/add/operator/map';

将解决您的问题

我在 Angular 5.2.0 和 rxjs 5.5.2 中对其进行了测试

Answer 16

发生这种情况是因为您正在使用 rxjs 并且在 rxjs 中的函数不是静态的，这意味着您不能直接调用它们，您必须调用管道内的方法并从 rxjs 库中导入该函数

但是如果你使用的是 rxjs-compat 那么你只需要导入 rxjs-compat 操作符

Answer 17

我尝试了以下命令，它得到了修复：

npm install rxjs@6 rxjs-compat@6 --save


import 'rxjs/Rx';

Answer 18

从 'rxjs/operators' 导入 { map }；

这在角度 8 中对我有用

Answer 19

加上 @mlc-mapis 评论的内容，您正在混合 lettable 运算符和原型修补方法。使用一个或另一个。

你的情况应该是

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class SwPeopleService {
    people$ = this.http.get('https://swapi.co/api/people/')
      .map((res:any) => res.results);

    constructor(private http: HttpClient) {} 
}

https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts