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
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)
}
}
Mit angle5HttpClient
beinhaltet 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 SieHttpClient
anstelle vonHttp
verwenden.
Sie können mehr darüber lesenhere
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>
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.