角4 this.http.get（...）。mapは関数ではありません

Question

こんにちは、私は自分のコードに問題があります。

this.http.get(...).map is not a function

しかし、私は追加します：このコードは、私はエラーを持っていると

import { Injectable } from '@angular/core'; 
import { Car } from "./models/car"; 
import { Observable } from "rxjs/Observable"; 
import { Http } from "@angular/http"; 
import 'rxjs' 

@Injectable() 
export class CarsService { 
    private apiUrl = "http://localhost:3000/api/cars"; 
    constructor(private http : Http) { } 

    getCars() : Observable<Car[]> { 
     return this.http.get(this.apiUrl) 
      .map((res) => res.json()) 
    } 
} 

import 'rxjs/add/operator/map' 

はまだ問題が、エラーがあります：

Cannot read property 'map' of undefined

あなたが助けることができます私？ありがとう

Answer 1

Httpに記載されているように、代わりにHttpClientを使用してください。 HttpClientは、オブジェクトへの応答を解析するので、応答のマッピングを削除します。また、避けるには、type checking errorsと答えてください。どのような応答が期待されているかをAngularに伝えてください。

HttpClientModuleをインポートし、BrowserModuleの後にインポート配列に追加します。あなたのサービスのインポートHttpClientでは、あなたのコンストラクタでそれを注入し、それを次の方法を使用します。

import { Injectable } from '@angular/core'; 
import { Car } from "./models/car"; 
import { Observable } from "rxjs/Observable"; 
import { HttpClient } from "@angular/common/http"; 
import 'rxjs' 

@Injectable() 
export class CarsService { 
    private apiUrl = "http://localhost:3000/api/cars"; 
    constructor(private httpClient : HttpClient) { } 

    getCars() : Observable<Car[]> { 
     // tell Angular you are expecting an array of 'Car' 
     return this.httpClient.get<Car[]>(this.apiUrl) 
    } 
} 

Answer 2

angular5 HttpClientの実装にはすでにマップの内部使用が含まれています。自動的に動作します。

だけ

getCars() : Observable<Car[]> { 
    return this.http.get(this.apiUrl) 
} 

としてそれを更新する。また、あなたが代わりにHttpのHttpClientを使用していることを確認してください。

それは自動的にJSONとしてレスポンスを解析するのであなたがこのhere

Answer 3

編集し、あなたのコード

import { Injectable } from '@angular/core'; 
import { Car } from "./models/car"; 
import { Observable } from "rxjs/Observable"; 
import { Http } from "@angular/http"; 


@Injectable() 
export class CarsService { 
    private apiUrl = "http://localhost:3000/api/cars"; 
    constructor(private http : Http) { } 

    getCars() : Observable<Car[]> { 
    return this.http.get(this.apiUrl) 
    } 
} 

についての詳細を読むことができます。明示的に解析する必要はありません。

Answer 4

ngOnInit() { 
this.loadCars(); 

} 

loadCars() : void { 
this.carsService.getCars().subscribe((cars) => { 
    this.cars = cars; 
    this.countTotalCost(); 
}) 
} 

だから私はloadCars

にngOnInitからこのthis.countTotalCost();

を移動し、現在のを.MAP OK。

私はこのエラーのみがあります。チェックした後に式が変更されました。以前の値： 'undefined'現在の値： 'NaN'。

<div class="row" *ngIf="grossCost"> //this line error/error context 
<div class="col-sm-12"> 
    <div class="total-cost"> 
    <p class="text-right">TOTAL GROSS COST: {{ grossCost}} PLN</p> 
    </div> 
</div> 
</div>