TypeScript 오류 http.get(...).map이 [null]의 함수가 아닙니다.

TypeScript 오류 http.get(...).map이 [null]의 함수가 아닙니다.

Angular의 HTTP에 문제가 있습니다.

그냥 하고 싶다GET a 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는 나나 the the the 라고 합니다.getHalls: from 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;
        });
    }
}

단, 예외가 있습니다.

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

이것을 Import할 필요가 있다고 생각합니다.

import 'rxjs/add/operator/map'

또는 일반적으로 관측 가능량에 대한 더 많은 방법을 사용하려는 경우 이 방법을 사용할 수 있습니다.경고: 그러면 50개 이상의 연산자가 모두 Import되어 응용 프로그램에 추가되므로 번들 크기와 로드 시간에 영향을 미칩니다.

import 'rxjs/Rx';

자세한 내용은 이 문제를 참조하십시오.

그냥 배경화면일 뿐인데...새롭게 발행된 서버 통신 개발 가이드(최종)에서는, 이것에 대해 설명합니다.

RxJS 라이브러리는 꽤 큽니다.프로덕션 애플리케이션을 구축하여 모바일 기기에 도입할 때 크기는 중요합니다.실제로 필요한 기능만 포함시켜야 합니다.

는 Angular의 합니다.Observable rxjs/Observablemodule은 여기서 하여 거의 입니다.들어 입니다.map★★★★★★ 。

필요한 연산자를 추가하는 것은 우리에게 달려 있습니다.요건에 맞게 정확하게 조정된 맞춤형 관찰 가능한 구현을 할 때까지 각 운영자를 하나씩 추가할 수 있었습니다.

@Tierry가 이미 대답했듯이 필요한 연산자를 끌어오면 됩니다.

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

아니면, 우리가 게으르면, 우리는 모든 연산자를 끌어들일 수 있습니다.경고: 앱 번들에 50개 이상의 연산자가 모두 추가되어 로드 시간에 영향을 미칩니다.

import 'rxjs/Rx';

rxjs 5.5 이후로는 파이프 가능한 연산자를 사용할 수 있습니다.

import { map } from 'rxjs/operators';

의 문제점은 무엇입니까? import 'rxjs/add/operator/map';

요.map.observable.prototype그리고 이 물체의 일부가 됩니다.

삭제하기로 .map한 스트림을 스테이트먼트를하지 못한 코드로부터의 , .map 남아 있습니다.Observable.prototype.

번들러가 미사용 코드(일명 'k.a')를 삭제하려고 하는 경우. tree shaking할 수 있습니다.map응용 프로그램에서 사용되지 않는 경우에도 관찰 가능한 연산자를 사용할 수 있습니다.

솔루션 -Pipeable operators

파이프형 연산자는 순수 함수이며 관측 가능에 패치를 적용하지 않습니다.ES6 가져오기 구문을 사용하여 연산자를 가져올 수 있습니다.import { map } from "rxjs/operators" 합니다.pipe()변수 수, 즉 체인 가능한 연산자를 필요로 한다.

다음과 같은 경우:

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

Angular 5를 사용하면 RxJs Import가 향상됩니다.

대신

import 'rxjs/add/operator/map';

이제 할 수 있다

import { map } from 'rxjs/operators';

「」를 사용합니다.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()); // <<--
    }
}

Angular 버전5 이상의 경우 갱신된 Import 행은 다음과 같습니다.

import { map } from 'rxjs/operators';

또는

import { map } from 'rxjs/operators';

또한 이러한 버전은 완전히 Pipable 연산자를 지원하므로 .pipe() 및 .subscribe()를 쉽게 사용할 수 있습니다.

Angular 버전2 를 사용하고 있는 경우는, 다음의 행은 정상적으로 동작합니다.

import 'rxjs/add/operator/map';

또는

import 'rxjs/add/operators/map';

그래도 문제가 발생할 경우 다음과 같이 진행해야 합니다.

import 'rxjs/Rx';

bco를 직접 사용하는 것은 바람직하지 않습니다.Load time이 향상되기 때문입니다.이것은 업계 규범에 따라 많은 오퍼레이터(유용하고 사용하지 않는 것)가 있기 때문에, 우선 위의 Import Line을 사용해 보고, 그것이 효과가 없는 경우는 rxjs/Rx를 선택하는 것이 좋습니다.

나는 이 문제에 대한 해결책을 가지고 있다.

다음 패키지를 설치합니다.

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

다음으로 이 라이브러리를 Import합니다.

import 'rxjs/add/operator/map'

마지막으로 ionic 프로젝트를 재시작합니다.

ionic serve -l

여기서 사용하는 맵은.map()JavaScript에서 맵 Observables앵귤러로.

이 경우 결과 데이터에서 지도를 사용하려면 Import해야 합니다.

map(project: function(value: T, index: number): R, thisArg: any): Observable<R>소스 관찰 가능에서 방출되는 각 값에 지정된 프로젝트 함수를 적용하고 결과 값을 관찰 가능으로 내보냅니다.

따라서 다음과 같이 Import합니다.

import 'rxjs/add/operator/map';

각도 버전 6 "0.6.8" rxjs 버전 6 "^6.0.0"

이 솔루션은 다음과 같습니다.

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

에 매일 이은 각 6에입니다.
는 먼저 에서 합니다..

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

NgModule -> Import에 HttpModule을 추가해야 합니다.

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

두 번째로 맵 작업을 하려면 먼저 파이프를 Import해야 합니다.

import { pipe } from 'rxjs';

셋째, 에서 맵 함수를 Import해야 합니다.

import { map } from 'rxjs/operators';

다음과 같이 파이프 내부의 지도를 사용해야 합니다.

 constructor(public http:Http){  }

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

그것은 완벽하게 행운을 가져다 준다!

angular2의 Http 서비스는 관찰 가능한 유형을 반환하므로 Angular2 설치 디렉토리(내 경우 'node_modules')에서다음과 같이 http 서비스를 사용하여 컴포넌트에 Observable의 맵 기능을 Import해야 합니다.

import 'rxjs/add/operator/map';

각도 6 - 한정import 'rxjs/Rx'나를 위해 묘기를 부렸다

파일에 행만 추가하면 됩니다.

import 'rxjs/Rx';

여러 개의 종속성을 가져옵니다.각도 5로 테스트 완료

실제로 RxJs는 맵 연산자를 다른 모듈로 분리하여 다른 연산자와 마찬가지로 Import를 설명해야 합니다.

import rxjs/add/operator/map;

괜찮을 거야

글로벌 Import는 안전합니다.

'rxjs/Rx' 가져오기;

import 'rxjs/add/operator/map';

문제가 해결됩니다.

각도 5.2.0과 rxjs 5.5.2로 테스트했습니다.

이는 rxjs를 사용하고 있고 rxjs 함수는 정적이지 않기 때문에 발생합니다.즉, 직접 호출할 수 없습니다.파이프 내의 메서드를 호출하여 rxjs 라이브러리에서 해당 함수를 Import해야 합니다.

그러나 rxjs-compative를 사용하는 경우 rxjs-compative 연산자를 Import하기만 하면 됩니다.

다음 명령을 시도했더니 수정되었습니다.

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


import 'rxjs/Rx';

'mapjs/map'에서 {map} 가져오기;

이것은 각도 8에서 나에게 효과가 있다.

게다가 @mlc-mlapis 코멘트에서는, 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

언급URL : https://stackoverflow.com/questions/34515173/angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n