Угловой 4 это.http.получить(…).карта-это не функция.

Привет у меня проблема с моим кодом. 

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

С этим кодом у меня Ошибка:

Это.http.получить(...).карта - это не функция

Но когда я добавлю: 

import 'rxjs/add/operator/map'

Все еще есть проблема, но ошибка:

Не удается прочитать свойство 'map' из undefined

Вы можете мне помочь? Спасибо

4 2
javascript rxjs angular-http

4 ответа:

Как упоминалось другими Http является устаревшим, используйте HttpClient вместо этого. HttpClient анализирует ваш ответ на объект, поэтому вы удаляете отображение ответа. Кроме того, чтобы избежать ошибки проверки типов, скажите Angular, какой реакции вы ожидаете.

Поэтому импортируйте HttpClientModule и добавьте его в массив imports, после BrowserModule. В сервисе import 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)
    }
}
2

С angular5 HttpClient реализация уже включает в себя внутреннее использование map.so это работает для вас автоматически.

Просто обновите его как 

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

Также убедитесь, что вы используете HttpClient вместо того, чтобы Http.

Вы можете прочитать об этом подробнее here

1

Отредактируйте свой код 

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

Так как он автоматически анализирует ответ как JSON. Вам не нужно явно анализировать его.

0
ngOnInit() {
 this.loadCars();

}

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

Поэтому я перемещаю это this.countTotalCost();

От ngOnInit до loadCars

И сейчас .карту свою "ОК".

У меня есть только эта ошибка: выражение изменилось после того, как оно было проверено. Предыдущее значение: "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>
0