Ich versuche, diese Informationen über Wetterstädte anzuzeigen, aber ich habe im letzten Moment Probleme, denke ich. Die API ist OpenWeatherMap und der Aufruf basiert auf den Dokumenten. Ich habe diesen Beitrag überprüft Um seiner Logik zu folgen, aber mein Problem bleibt, werden Daten nicht gerendert, mit dem Fehler "FEHLER Fehler: Es kann kein anderes unterstützendes Objekt '[Objekt Objekt]' vom Typ 'Objekt' gefunden werden. NgFor unterstützt nur die Bindung an Iterables wie Arrays."
Das ist mein Service:
export class WeatherService {
constructor(private http: HttpClient) { }
forecast: RootObject;
getForecast() {
const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
return <Observable<RootObject[]>> this.http.get(url)
.pipe(
retry(3),
catchError(this.handleError));
}
Dies ist die generierte Schnittstelle:
export interface RootObject {
coord: Coord;
sys: Sys;
weather: Weather[];
main: Main;
wind: Wind;
rain: Rain;
clouds: Clouds;
dt: number;
id: number;
name: string;
cod: number;
}
interface Clouds {
all: number;
}
interface Rain {
'3h': number;
}
interface Wind {
speed: number;
deg: number;
}
interface Main {
temp: number;
humidity: number;
pressure: number;
temp_min: number;
temp_max: number;
}
interface Weather {
id: number;
main: string;
description: string;
icon: string;
}
interface Sys {
country: string;
sunrise: number;
sunset: number;
}
interface Coord {
lon: number;
lat: number;
}
Die Komponente:
export class MainComponent implements OnInit {
foreCast: RootObject[];
constructor(private weatherService: WeatherService) {
this.getForecast();
}
ngOnInit() {
}
getForecast() {
this.weatherService.getForecast()
.subscribe(data => {
this.foreCast = data;
console.log(this.foreCast);
});
}
Und der HTML:
<ul *ngFor="let wind of foreCast">
<li>{{wind.speed}}</li>
</ul>
Dies ist das Protokoll, das ich bekomme:
Alle Importe sind vorhanden, und das console.log zeigt mir das abgerufene Objekt. Was fehlt mir in diesem Mapping?
3 Antworten
Die Lösung war ganz einfach: Es ging darum, auf ein verschachteltes Objekt abzuzielen und das Modell zu initialisieren
Service.TS:
getForecast(): Observable<RootObject[]> {
const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
return this.http.get<RootObject[]>(url)
.pipe(
retry(3),
catchError(this.handleError));
}
Komponente:
forecasts: RootObject[] = []; //Initialize
constructor(private weatherService: WeatherService) {
this.getForecast();
}
getForecast() {
this.weatherService.getForecast()
.subscribe(data => {
this.forecasts = data;
console.log(this.forecasts);
});
}
Und das Hauptproblem beim Rendern der Daten:
<div class="container" >
<ul *ngFor="let list of forecasts.list">
<li>{{list.dt}}</li>
</ul>
</div>
Ich habe nicht tief genug angestrebt, weil die abgerufenen Daten ein verschachteltes Objekt sind
Wie im Fehlerprotokoll angegeben, scheint es, als würden Sie über ein Objekt und nicht über ein Array iterieren. Was sagt die console.log?
Ich gehe davon aus, dass Sie kein Array, sondern ein Objekt erhalten.
Eine andere Sache ist die Verwendung der getForecast-Methode. Der httpClient gibt immer ein Observable zurück. Sie können nur den Typ bestimmen, den Sie erwarten:
getForecast():Observable<RootObject[]> {
const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
return this.http.get<RootObject[]>(url)
.pipe(
retry(3),
catchError(this.handleError));
}
Ich habe jetzt einen tieferen Blick in deine Ruhe-API geworfen. Angenommen, Sie möchten immer die Geschwindigkeit des Windes auflisten, müssen Sie Folgendes tun:
getForecast():Observable<RootObject[]> {
const url = 'http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&APPID=ef48ddb3926ce0283de7291a09fd253e';
return this.http.get<RootObject[]>(url)
.pipe(
map(res => res.list)
retry(3),
catchError(this.handleError));
}
In Ihrer Vorlage:
<ul *ngFor="let obj of foreCast">
<li>{{obj.wind.speed}}</li>
</ul>