[angular] TypeScript 오류 http.get (…) .map이있는 각도 HTTP GET은 [null]의 함수가 아닙니다.

Program / 글쓴이

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

난 그냥 원하는 목록보기에 표시됩니다.GETJSON

서비스 클래스

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

답변

이것을 가져와야한다고 생각합니다.

import 'rxjs/add/operator/map'

또는 더 일반적으로 관찰 가능 항목에 대한 더 많은 방법을 원한다면
경고 : 50 개 이상의 연산자를 모두 가져 와서 응용 프로그램에 추가하여 번들 크기 및로드 시간에 영향을줍니다.

import 'rxjs/Rx';

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

답변

약간의 배경 지식 … 새로 제작 된 서버 커뮤니케이션 개발 가이드 (최종)가 이에 대해 논의 / 멘션 / 설명합니다.

RxJS 라이브러리는 상당히 큽니다. 프로덕션 응용 프로그램을 빌드하고 모바일 장치에 배포 할 때 크기가 중요합니다. 실제로 필요한 기능 만 포함해야합니다.

따라서 Angular는 모듈 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';

답변

에서 5.5 rxjs 이후, 당신은 사용할 수 있습니다 pipeable 연산자

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

답변

Angular 5에서는 RxJS 가져 오기가 개선되었습니다.

대신에

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 { 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';

업계 표준에 따라 좋은 방법이 아닌 많은 수의 연산자 (유용하고 유용하지 않은 연산자)가 있으므로로드 시간을 늘리는 직접 bcoz를 사용하지 않는 것이 좋습니다. 위에서 언급 한 가져 오기 라인을 먼저 사용해보십시오. 그렇지 않으면 rxjs / Rx로 이동하십시오.

답변

이 문제에 대한 해결책이 있습니다

이 패키지를 설치하십시오 :

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

그런 다음이 라이브러리를 가져옵니다 

import 'rxjs/add/operator/map'

마지막으로 이온 프로젝트를 다시 시작하십시오. 

ionic serve -l