Невозможно получить данные о погоде от API с помощью угловых компонентов

Question

Я хочу создать простую приложение погоды с использованием углового 2, чтобы узнать эту структуру.

У меня есть GraphsComponent, где я собираюсь нарисовать график температуры.

import { Component, OnInit } from '@angular/core'; 

import { WeatherAPIService } from './weatherAPI.service'; 

@Component({ 

    selector: 'my-graphs', 

    template: '<h1>Charts for {{this.weatherAPIService.cityName}}</h1>', 

    providers: [WeatherAPIService] 
}) 

export class GraphsComponent implements OnInit { 

    weatherData = {}; 
    cityName: string = ""; 


    constructor(
        private weatherAPIService: WeatherAPIService, 
      ) { } 

    ngOnInit(): void { 
     this.weatherAPIService.getWeather("London").then(data => this.weatherData = data); 
     console.log(this.weatherData); //wrong data 
     } 

} 

У меня также есть WeatherAPIService, который предоставляет информацию о погоде:

import { Injectable } from '@angular/core'; 


@Injectable() 
export class WeatherAPIService { 

    weatherData = {}; 
    cityName: string = ""; 

    getWeatherHelper (city: string) { 
     var locationData = new Object(); 
     $.get("https://maps.googleapis.com/maps/api/geocode/json?address=" + city, function (data) { 

      locationData['latitude'] = data.results[0].geometry.location.lat; //latitude 
      locationData['longitude'] = data.results[0].geometry.location.lng; //longitude 

      $.ajax({ 
       url: "https://api.darksky.net/forecast/[MyAPIKey]/" + locationData['latitude'] + ',' + locationData['longitude'], 
       dataType: "jsonp", 
       success: function (data) { 
        //alert("The temperatute in " + city + " is " + data.currently.temperature); 
        this.weatherData = data; 
        this.cityName = city; 
        console.log(data); //good data 
        return data; 
       } 

      }); 

     } 
    } 

    getWeather(city: string): Promise<string[]> { 
     return Promise.resolve(this.getWeatherHelper(city)); 
    } 

    } 

Я хочу, чтобы получить данные о погоде, чтобы отобразить его.

В getWeatherFunction, я использую 2 API: - Google геокодирования, чтобы получить широту и долготу города я хочу погода - Darksky, чтобы получить погоду (это требует широты и долготы)

Проблема является факт, что получение местоположения и погода от API-интерфейсов является асинхронным, поэтому getWeatherHelper() заканчивается до возвращения данных.

Вот почему я добавил weatherData и cityName в WeatherAPIService, но даже если эти переменные имеют правильные данные после возвращения данных из API, имя города не отображается в шаблоне GraphsComponent. Почему это? Как следует справляться с подобными ситуациями? Где я должен хранить информацию от API погоды? В компоненте или в сервисе?

Как вы можете видеть, я использовал обещание, потому что я думал, что он получит данные после того, как будет собран API, но это не так.

Как вы, вероятно, заметили, я действительно новичок в угловом, поэтому, пожалуйста, попробуйте ответить так, чтобы я мог понять это. Я знаю столько, сколько я узнал из официального углового учебника («Путешествие по героям»).

Answer 1

Помимо смешивания в jQuery, вы теряете контекст this при использовании function. Я бы предложил использовать lambda expression, который сохраняет указанный контекст, поэтому вы можете фактически сохранить данные.

Таким образом, вместо того, чтобы использовать

function (data) { 

начать использовать lambda везде, где вам нужно инлайн функции:

(data) => { 

Примененные к коду:

getWeatherHelper (city: string) { 
    var locationData = new Object(); 
    $.get("https://maps.googleapis.com/maps/api/geocode/json?address=" + city, (data) => { 

     locationData['latitude'] = data.results[0].geometry.location.lat; //latitude 
     locationData['longitude'] = data.results[0].geometry.location.lng; //longitude 

     $.ajax({ 
      url: "https://api.darksky.net/forecast/[MyAPIKey]/" + locationData['latitude'] + ',' + locationData['longitude'], 
      dataType: "jsonp", 
      success: (data) => { 
       //alert("The temperatute in " + city + " is " + data.currently.temperature); 
       this.weatherData = data; 
       this.cityName = city; 
       console.log(data); //good data 
       return data; 
      } 

     }); 

    }); 
}