web-dev-qa-db-ja.com

Angular TypeScriptエラーHTTP.get（...）。mapによるHTTP GETは[null]内の関数ではありません

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]の関数ではありません

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"
  ]
}
angularrxjs
311
Claudiu

これをインポートする必要があると思います。

import 'rxjs/add/operator/map'

あるいはもっと一般的には、あなたが観測量に対してもっと多くの方法を持ちたいならば。 警告：これは50個以上の演算子をすべてインポートしてアプリケーションに追加するため、バンドルサイズとロード時間に影響します。 

import 'rxjs/Rx';

詳細については この問題 を参照してください。

522
Thierry Templier

ほんの少しの背景...新しくミントされた サーバ通信 devガイドは（ついに）これを議論し/言及し/説明しています：

RxJSライブラリはかなり大きいです。プロダクションアプリケーションを構築してそれをモバイルデバイスにデプロイする場合、サイズが重要になります。実際に必要な機能だけを含めるべきです。

したがって、Angularはrxjs/Observableモジュール内のObservableの簡略版を公開しています。これには、mapメソッドなど、ここで使用したいものを含め、ほとんどすべての演算子がありません。

必要な演算子を追加するのは私たち次第です。カスタムObservable実装が要件に正確に合わせられるまで、各演算子を1つずつ追加できます。

@Thierryがすでに回答しているので、必要な演算子を取り込むことができます。

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

あるいは、私たちが怠け者であれば、私たちは完全な演算子を取り入れることができます。 警告：これはあなたのアプリバンドルに50人以上の演算子をすべて追加し、ロード時間に影響します 

import 'rxjs/Rx';
80
Mark Rajcok

Angular 5では、RxJSのインポートが改善されています。

の代わりに

import 'rxjs/add/operator/map';

今できる

import { map } from 'rxjs/operators';
15
Claudiu

rxjs 5.5 以降、 pipeable 演算子を使用できます。

import { map } from 'rxjs/operators';

何が悪いのか import 'rxjs/add/operator/map';

このアプローチを使うと、map演算子はobservable.prototypeにパッチされ、このオブジェクトの一部になります。

後で、観察可能なストリームを処理するコードからmap演算子を削除するが、対応するimport文を削除できない場合、mapを実装するコードはObservable.prototypeの一部のままです。

バンドラーが未使用のコード（ a.k.a. tree shaking）を削除しようとすると、アプリケーションで使用されていなくてもObservableにmap演算子のコードを保持することを決定する場合があります。

解決策 - 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())
    );
}
13
Sachila Ranawaka

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

この問題の解決策があります

このパッケージをインストールしてください。

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

このライブラリをインポートする

import 'rxjs/add/operator/map'

最後にイオンプロジェクトを再開します

ionic serve -l
3
divyajeet singh

Angularバージョン5以降の場合、更新されたインポート行は次のようになります。

import { map } from 'rxjs/operators';

OR

import { map } from 'rxjs/operators';

また、これらのバージョンはPipable Operatorsを完全にサポートしているので、.pipe（）と.subscribe（）を簡単に使用できます。

Angular version 2を使用している場合は、次の行を使用してください。

import 'rxjs/add/operator/map';

OR

import 'rxjs/add/operators/map';

それでも問題が解決しない場合は、以下の手順に従ってください。

import 'rxjs/Rx';

業界では慣例ではないので、ロード時間を短縮するために直接使用するのは望ましくありません。これには多数の演算子が含まれています（便利なものと役に立たないもの）。あなたは最初に上記のインポート行を使ってみます、そしてそれがうまくいかないなら、あなたはrxjs/Rxのために行くべきです

3
Jitendra Ahuja

Angularバージョン6 "0.6.8" rxjsバージョン6 "^ 6.0.0"

この解決策は以下のとおりです。

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

私たちは皆、Angularが毎日開発されていることを知っているので、毎日たくさんの変更があり、この解決策はAngular 6とRX 6用です。
最初にhttp yoで作業するにはからインポートする必要があります。結局のところ、app.module.tsでHttpModuleを宣言する必要があります。

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

そして、HttpModuleをNgmoduleに追加する必要があります - > imports 

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

地図を扱うために2番目にパイプをインポートする必要があります。

import { pipe } from 'rxjs';

3番目にあなたはからマップ機能のインポートが必要です：

import { map } from 'rxjs/operators';

あなたはこの例のようにパイプ内のマップを使用する必要があります：

 constructor(public http:Http){  }

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

それは完全に幸運を祈る！

3
nadir hamidou

map あなたがここで使っているのは、JavaScriptの.map()ではなく、AngularのObservablesに取り組んでいるRxjsマップ関数です...

そのため、結果データにmapを使用したい場合は、インポートする必要があります。

map(project: function(value: T, index: number): R, thisArg: any): Observable<R>ソースObservableが発行した各値に特定のプロジェクト関数を適用し、結果の値をObservableとして発行します。

だから、単にこのようにそれをインポートする：

import 'rxjs/add/operator/map';
2
Alireza

http service/ angular2 は Observable typeを返すので、あなたのAngular2インストールディレクトリ（私の場合は 'node_modules'）から、あなたの コンポーネントにObservableのmap関数をインポートする必要があります。 using http serviceを使用します。

import 'rxjs/add/operator/map';
1
Amardeep Kohli

Angular 6 - 'rxjs/Rx'のみをインポートするとうまくいかなかった

1
Shimi Avizmil

ファイルに次の行を追加するだけです。

'rxjs/Rx'をインポートしてください。

それは依存関係の束をインポートします。角度5でテスト

1
Mandeep Singh

世界的な輸入は順調に進んでいます。

'rxjs/Rx'をインポートしてください。

1
rut shah

これは、rxjsを使用しており、rxjs関数では静的ではないために直接実行できないことを意味しています。つまり、パイプ内のメソッドを呼び出してrxjsライブラリからその関数をインポートする必要があります。

しかし、あなたがrxjs-compatを使っているなら、あなたはただrxjs-compatオペレータをインポートする必要があります。

0
Gurvinder Guraya

確かに、RxJはそのマップ演算子を別のモジュールに分けているので、他の演算子と同様に明示的にインポートする必要があります。

import rxjs/add/operator/map;

そしてあなたは元気になります。

0
Piyush P
import 'rxjs/add/operator/map';

あなたの問題を解決します

私はそれを角度5.2.0とrxjs 5.5.2でテストしました

0
Mayank Bhardwaj

以下のコマンドを試してみたが、修正された。

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


import 'rxjs/Rx';
0
Phan Hero