角度コンポーネントを使用して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（）が終了します。

WeatherAPIServiceにweatherDataとcityNameを追加した理由は、APIのデータが返された後にこれらの変数に適切なデータが含まれていても、cityNameはGraphsComponentのテンプレートには表示されません。何故ですか？このような状況をどのように処理すればよいでしょうか？天気APIの情報は実際にどこに保存する必要がありますか？コンポーネント内またはサービス中？

ご覧のとおり、私は、APIから収集されたデータを取得すると思っていたので、私は約束をしましたが、そうではありません。

あなたが気づいたように、私は本当に角度がついていないので、私が理解できる方法で答えてみてください。 私は公式の角2のチュートリアル（ "英雄のツアー"）から学んだことを知っています。

Answer 1

functionを使用している場合は、jQueryで混合する以外に、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; 
      } 

     }); 

    }); 
}