web-dev-qa-db-fra.com

Angular 4 this.http.get (...). Map n’est pas une fonction

Salut j'ai un problème avec mon code. 

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

Avec ce code j'ai une erreur:

this.http.get (...). map n'est pas une fonction

mais quand j'ajoute:

import 'rxjs/add/operator/map'

Vous avez toujours un problème mais l'erreur est: 

Impossible de lire la propriété 'map' of indéfinie

Pouvez-vous m'aider? Merci 

javascriptangularrxjsangular-http
4
Marek Patyna

Comme mentionné par d’autres, Http est obsolète, utilisez plutôt HttpClient. HttpClient analyse votre réponse à un objet afin de supprimer le mappage de la réponse. De même, pour éviter les erreurs de vérification de type, indiquez à Angular le type de réponse attendu. 

Importez donc HttpClientModule et ajoutez-le au tableau imports, après BrowserModule. Dans votre service import HttpClient, insérez-le dans votre constructeur et utilisez-le de la manière suivante:

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

Avec angular5HttpClientimplémentation inclut déjà l’utilisation interne de la carte.so fonctionne automatiquement pour vous.

il suffit de le mettre à jour comme

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

Assurez-vous également que vous utilisezHttpClientau lieu deHttp.

Vous pouvez en savoir plus à ce sujethere 

2
Sajeetharan
ngOnInit() {
 this.loadCars();

}

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

Alors je propose cette this.countTotalCost();

de ngOnInit à loadCars

et maintenant .map c'est ok. 

Je n'ai que cette erreur: l'expression a changé après avoir été vérifiée. Valeur précédente: 'undefined'. Valeur actuelle: '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
Marek Patyna

Editez votre code 

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

puisqu'il analyse automatiquement la réponse en tant que JSON. Vous n'êtes pas obligé de l'analyser explicitement. 

0
VithuBati