Question

我想使用angular 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： - 谷歌地理编码，以获得我想要天气的城市的纬度和经度 - DarkSky获取天气（需要纬度和经度）

问题在于，从API获取位置和天气是异步的，因此getWeatherHelper（）在返回数据之前就完成了。

这就是我在WeatherAPIService中添加weatherData和cityName的原因，但即使这些变量在返回API数据后仍有正确的数据，cityName也不会显示在GraphsComponent的模板中。这是为什么？如何处理这样的情况？我应该在哪里存储来自天气API的信息？在组件或服务中？

正如你所看到的，我使用了promise，因为我认为在从API收集数据之后它会获得数据，但它没有。

正如你可能已经注意到的那样，我对角度很新，所以请尽量回答，我能理解它。我从官方角度2教程（＆＃34;英雄之旅＆＃34;）中学到了很多东西。

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

        });

    });
}

无法使用角度组件从API获取天气数据

1 个答案: