각도 구성 요소를 사용하여 API에서 기상 데이터를 가져올 수 없습니다.

Question

이 프레임 워크를 배우기 위해 각도 2를 사용하여 간단한 날씨 앱을 만들고 싶습니다.

저는 GraphsComponent를 가지고 있는데, 여기서 온도 차트를 그릴 것입니다.

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

    } 

내가 날씨 데이터를 표시 할 싶어 :

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을 보유하고 있습니다. getWeatherFunction에서

, 나는이 API를 사용 - 구글 지오 코딩 내가 날씨 원하는 도시의 위도와 경도를 얻을 - DarkSky 날씨를 얻을 수를

문제는이다 (이것은 위도와 경도를 필요) 사실 API에서 위치와 날씨를 가져 오는 것은 비동기식이므로 데이터가 반환되기 전에 getWeatherHelper()가 완료됩니다.

WeatherAPIService에서 weatherData와 cityName을 추가 한 이유는 API의 데이터가 반환 된 후에도 이러한 변수에 적절한 데이터가 있지만 cityName이 GraphsComponent의 템플릿에 표시되지 않기 때문입니다. 왜 그런가요? 이런 상황을 어떻게 처리해야합니까? 날씨 API의 정보는 실제로 어디에 저장해야합니까? 구성 요소 또는 서비스에서?

볼 수 있듯이 양식 API를 수집 한 후에 데이터를 가져올 것이라고 생각했기 때문에 약속을 사용했지만 실제로는 사용하지 않았습니다.

아마 눈치 챘을 때, 나는 정말 새기다. 이해할 수있는 방식으로 대답 해주십시오. 나는 공식 2 각본 ("영웅의 여행")에서 배웠던만큼 많이 알고 있습니다.

Answer 1

jQuery에서 믹싱 외에도 function을 사용할 때 this 컨텍스트가 손실됩니다. 나는 문맥을 보존하는 lambda expression을 사용하여 실제로 데이터를 저장할 수 있도록 제안 할 것입니다.

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

     }); 

    }); 
}