如何使用httpClient get方法从Angular 7的OpenWeatherMap API获取数据?

时间:2019-05-19 23:58:39

标签: angular

我正在使用OpenWeatherMap根据城市名称获取更小麦的数据,我只想获取数据并将其记录在控制台上。首先,看看它是如何工作的。但这不起作用,我也不知道为什么?

我看到了教程,但是它们的解决方案对我不起作用,我不知道为什么找不到地图,我不知道要导入什么,或者不使用其他东西发送请求

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 
@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  APIkey = 'this is my api key and he is ok';
  URL = 'http://api.openweathermap.org/data/2.5/forecast?q=';

  constructor(private http: HttpClient) { }

  getCurrentWeather(city) {
    return this.http.get(this.URL + city + '&APPID=' + this.APIkey).map((response : Response) => {
      return response.json();   
  })
  }

}
import { Component, OnInit } from '@angular/core';
import { WeatherService } from '../weather.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  city = 'London';

  constructor(private _weatherService) { }

  ngOnInit() {
    this._weatherService.getCurrentWeather(this.city).subscribe((res) => { console.log(res)});
  }

compiler.js:2430 Uncaught Error: Can't resolve all parameters for HomeComponent: (?).
    at syntaxError (compiler.js:2430)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18984)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18877)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:18496)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:19080)
    at compiler.js:19071
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentsFromProvider (compiler.js:19070)
    at compiler.js:19043
    at Array.forEach (<anonymous>)

我希望在控制台中获取有关伦敦的数据,但我没有得到它,而是在控制台中获得了这张第三张图片

2 个答案:

答案 0 :(得分:0)

Angular中的依赖项注入器需要知道通过构造函数注入的参数的类型

constructor(private _weatherService: WeatherService) { }
                                     ^^^ must specify the type

答案 1 :(得分:0)

函数getCurrentWeather需要看起来像这样,现在可以正常工作

 getCurrentWeather(city) {
    return this.http.get(this.URL + city + '&APPID=' + this.APIkey);
  }