Angular4接入天气接口

Question

我正在尝试在制作天气应用程序的同时自学Angular4。连接API时遇到问题。我试着用下面的资源来跟随allowing。

https://medium.com/craft-academy/connecting-an-api-to-an-angular-4-front-end-application-e0fc9ea33202

https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

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

​

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

@Component({
    selector: "app",
    templateUrl: "./app.component.html",
    styleUrls: [ "./app.component.css" ]
})
export class AppComponent {
    name = "Angular 4 Weather App";
    apiKey = "";
    private apiUrl = "http://api.openweathermap.org/data/2.5/forecast?q=london&APPID=" + this.apiKey;
    data: any = {};

    constructor (private http: HttpClient) {
//         this.getWeather();
//         this.getWeatherData();
    }

//     getWeather() {
//       return this.http.get(this.apiUrl)
//         .map((res: Response) => res.json())
//     }
//     getWeatherData() {
//       this.getWeather().subscribe(data => {
//         console.log(data);
//         this.data = data;
//       })
//     }
    ngOnInit(): void {
        this.http.get(this.apiUrl).subscribe(data => {
            this.data = data;
            console.log(data);
        });
    }

}

​

Answer 1

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

您要做的是创建一个TypeScript服务，用于调用What以获取数据。然后，您将从您拥有的任何组件(当前为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;
}

仅供参考，根据您得到的响应，从服务器映射回的响应可能会有所不同。

在这里，您可以引用TS服务内部的天气可观察性，并从中获取任何数据并将其放入$result对象中。您将不需要静态地定义任何对象来保存数据，现在您将能够获取对象中的任何内容，无论它是否发生更改。

如果你还没有，我强烈推荐阅读本教程，它对我帮助很大：https://angular.io/tutorial

然后，您的AppComponent可以调用TS服务，特别是该方法，以获取数据。然后你可以订阅它，每当它接收回数据时，它就会执行你的逻辑。

AppComponent：

export class AppComponent implements OnInit {

    constructor(
        public weatherService: WeatherService){}

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