发布打印 api 天气数据 html 页面

Question

我也在尝试编写一个非常基本的天气应用程序，从这个 API https://openweathermap.org/api 中提取数据。当我从 home.html 文件中单击 link 时，weatherData.html 什么也没有显示，我似乎无法在我的代码中找出问题所在，任何帮助将不胜感激。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Weather Ireland
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Weather Ireland</ion-title>
    </ion-toolbar>
  </ion-header>

  <a class="button icon-right ion-plus-round" href="../weather-data/weather-data.page.html">weatherData</a>
</ion-content>

这是 homepage.html 的代码，link 也是 weatherData.html 文件的代码，API 中的信息应该被打印出来。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import {WeatherDataService} from '../weather-data.service'

import { WeatherDataPageRoutingModule } from './weather-data-routing.module';

import { WeatherDataPage } from './weather-data.page';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    WeatherDataPageRoutingModule
  ],
  declarations: [WeatherDataPage]
})
export class WeatherDataPageModule {
  weather;

  constructor(private weatherdataservice: WeatherDataService){}
  ngOnInit(){
    this.weatherdataservice.getWeather().subscribe((data)=>{
      console.log(data);
      this.weather = data['weather'];
    }
    )
  }
}

这是 data.html 文件的代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import {WeatherDataService} from '../weather-data.service'

import { WeatherDataPageRoutingModule } from './weather-data-routing.module';

import { WeatherDataPage } from './weather-data.page';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    WeatherDataPageRoutingModule
  ],
  declarations: [WeatherDataPage]
})
export class WeatherDataPageModule {
  weather;

  constructor(private weatherdataservice: WeatherDataService){}
  ngOnInit(){
    this.weatherdataservice.getWeather().subscribe((data)=>{
      console.log(data);
      this.weather = data['weather'];
    }
    )
  }
}

这是 data.module.ts 文件的代码

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'


@Injectable({
  providedIn: 'root'
})
export class WeatherDataService {

  APIKey = 'fec30507acb533f670080ab3174f226f';


  constructor(private httpClient: HttpClient) { }

  public getWeather(){
  return this.httpClient.get('api.openweathermap.org/data/2.5/weather?lat={53.87}&lon={8.63}&appid={fec30507acb533f670080ab3174f226f}')
  }

}

这是 data.services ts 文件的代码。

Answer 1

从下面的代码来看，虽然您有来自 api 的响应，但您似乎想重定向到某个页面。尝试创建新页面并传递响应，而不是 link 重定向。

    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Weather Ireland
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Weather Ireland</ion-title>
        </ion-toolbar>
      </ion-header>

      **<a class="button icon-right ion-plus-round" href="../weather-data/weather-data.page.html">weatherData</a>**

    </ion-content>

在 WeatherDataPage 中尝试使用 NavController 在构造函数中声明 navCtrl: NavController 并使用 this.navCtrl.push(component_name, {whetherData: this.weather});

导航到新组件页面后使用 NavParams。声明 navParams：NavParams 并使用 navParams.get("whetherData");

发布打印 api 天气数据 html 页面

Issue printing api weather data too a html page

html

api

weather-api

typescript

ionic-framework