Angular4连接天气API

我试着在制作天气应用程序时自学英语。我无法连接API。我已尝试使用以下资源进行跟踪

我无法像示例中那样在控制台中显示对象。我在终端或控制台中没有收到任何错误。我用另一种方法注释了这个例子，并删除了apikey。这是我的app.component.ts。除此之外，我在app.module.ts中导入了httpclientmodule。我是一个初学者，这是我第一次发帖，所以如果我做错了，我很抱歉

从'@angular/core'导入{Component}；
从'@angular/common/http'导入{HttpClient}；
导入'rxjs/add/operator/map'；
@组成部分({
选择器：“应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
name=“Angular 4天气应用程序”；
apiKey=“”；
私有apiUrl=”http://api.openweathermap.org/data/2.5/forecast?q=london&APPID=“+这个.apiKey；
数据：any={}；
构造函数（专用http:HttpClient）{
//这个。getWeather（）；
//这是.getWeatherData（）；
}
//getWeather（）{
//返回this.http.get（this.apirl）
//.map（（res:Response）=>res.json（））
//     }
//getWeatherData（）{
//this.getWeather（）.subscribe（数据=>{
//控制台日志（数据）；
//这个数据=数据；
//       })
//     }
ngOnInit（）：void{
this.http.get（this.apiUrl）.subscribe（数据=>{
这个数据=数据；
控制台日志（数据）；
});
}
}

不要为自己是新手而道歉，你会很快学会的

您要做的是创建一个TypeScript服务，用于调用WeatherAPI以获取数据。然后，您将从您拥有的任何组件（当前为AppComponent）调用它。这样可以更好地分离逻辑调用和服务器调用

执行服务设置时，请尝试以下操作

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';

@Injectable()
export class WeatherService {

    $result: Observable<any>;
    weather: any;

    loadWeather() {  
        $result = this.http.get(this.apiUrl)
            .map(response => { return response["data"] });
            .share();
    }

    this.$result.subscribe(weather => {
        this.weather = weather;
    });

    return this.$result;
}

---

在Chrome中打开“开发者工具”面板（按F12）并转到“网络”选项卡。刷新应用程序以重新触发请求，并查看服务器的实际响应。可能是API中出现了错误。代码看起来不错。我相信你不能简单地创建一个名为

ngOnInit

的函数，然后让框架调用它。您的类需要实现

OnInit

。请参见此处的peek a boo组件：。最简单的方法是在

ngOnInit

函数的开头设置一个调试器或console.log，以确保它正在运行。一旦你开始工作，花一些时间查看页面上的钩子的完整列表，看看你想在用例中使用哪一个钩子。我在网络选项卡中没有看到任何错误。apiUrl的状态为200。另外，在ngOnInit开始时尝试了console.log，但在类中添加了OnInit，但没有成功。但是，在添加/不添加OnInit的情况下，执行警报而不是console.log都有效。我不确定这是否正常。我试图设置一个服务，但出现了一些错误。我认为这是最好的方法，因为我有一个天气和搜索组件，两者都需要访问。我想我开始在应用程序组件中这样做是为了看看是否可以首先从API获取数据，这也是我提供的初始链接设置的方式。在我尝试其他东西之前，我可能应该先看一下那个教程。谢谢没问题！希望这有帮助。那个教程帮了我很大的忙，希望你也能发现它很有用！

export class AppComponent implements OnInit {

    constructor(
        public weatherService: WeatherService){}

    ngOnInit() {
        this.weatherService.loadWeather().subscribe(weather => {
             ...Do Logic Here....
             todaysTemp = weather.todaysTemp;
        });
    }
}