Question

我正在尝试读取天气数据并将其显示在home.html上我觉得我已经正确地完成了所有操作，并且不明白问题出在哪里...希望你们中的一个能为我指明正确的方向！谢谢您的时间。

我正在尝试从URL中读取json数据并将其输出到屏幕上，但是却没有任何输出...这些代码段清楚地说明了我正在尝试做的事情

在我的weather.ts提供者中，我有：

 getWeather():Observable<any>{
    return this.http.get('http://api.apixu.com/v1/forecast.json?key=3a1385634ea148c0b5b175621192204%20&q=52.970490%20-9.419951');
  }
}

在我的home.html中，我有：

 <ion-item *ngFor="let w of weather">
          <h2>{{w.condition.text}}</h2>
          <ion-img height='200' width='150' src="{{w.condition.icon}}"></ion-img>
    </ion-item>

，我的home.ts中有以下代码

export class HomePage {
  weather:any = [];

  constructor(public navCtrl: NavController, private weatherProvider:WeatherProvider) {

  }
    ionWeatherViewDidLoad(){
      this.weatherProvider.getWeather().subscribe((data)=>{
          this.weather = data.current;
          console.log(this.weather);
      });
    }
  }

我希望看到以文本形式显示的输出，其中指出了当前的天气，并且还显示了指示天气状况的图像...我认为问题出在我的应用程序无法正确读取json文件的地方。感谢您的帮助！

此外，这是一个链接，显示我正在尝试解析的json文件看起来像https://gyazo.com/12dd0045c522c4e98bc8e8354e60b7a4

Answer 1

服务ts

getWeather(): Observable<any> {
    return this.http.get("http://api.apixu.com/v1/forecast.json?key=3a1385634ea148c0b5b175621192204%20&q=52.970490%20-9.419951").pipe(res => {
      return res;
    });
  }

您的ts

 ngOnInit() {

    const weather = this.weatherProvider.getWeather();
    weather.subscribe(
    subscribe(
          (Response  => {
                           this.cDetail = Response;
                           console.log("apI", this.cDetail)
                         })
                         // success

          .catch(error => { console.log(error) }); // fail

 });

我认为它将起作用

如何修复API不返回数据

在我的home.html中，我有：

，我的home.ts中有以下代码

1 个答案: