webentwicklung-frage-antwort-db.com.de

Angular 4 this.http.get (...). Map ist keine Funktion

Hallo, ich habe ein Problem mit meinem 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())
    }
}

Mit diesem Code habe ich Fehler:

this.http.get (...). map ist keine Funktion

aber wenn ich hinzufüge:

import 'rxjs/add/operator/map'

Immer noch ein Problem, aber der Fehler ist:

Die Eigenschaft 'map' von undefined kann nicht gelesen werden

Kannst du mir helfen? Vielen Dank

4
Marek Patyna

Wie von anderen erwähnt, ist Http veraltet, verwenden Sie stattdessen HttpClient. HttpClient analysiert Ihre Antwort auf ein Objekt, sodass Sie die Zuordnung der Antwort entfernen. UmTippfehler zu vermeiden, teilen Sie Angular mit, welche Art von Antwort Sie erwarten.

Importieren Sie also HttpClientModule und fügen Sie es nach BrowserModule zum Importarray hinzu. Fügen Sie es in Ihrem Service-Import HttpClient in Ihren Konstruktor ein und verwenden Sie es wie folgt:

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

Mit angle5HttpClientbeinhaltet die Implementierung bereits die interne Verwendung der Karte. Sie funktioniert also automatisch für Sie.

aktualisieren Sie es einfach als

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

Stellen Sie außerdem sicher, dass SieHttpClientanstelle vonHttpverwenden.

Sie können mehr darüber lesenhere

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

}

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

Also bewege ich diese this.countTotalCost();

von ngOnInit zu loadCars

und jetzt .map es ist ok.

Ich habe nur diesen Fehler: Ausdruck hat sich geändert, nachdem es überprüft wurde. Vorheriger Wert: 'undefined'. Aktueller Wert: '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

Bearbeiten Sie Ihren 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)
   }
}

da es die Antwort automatisch als JSON parst. Sie müssen es nicht explizit analysieren.

0
VithuBati