Распечатайте данные о погоде API также на странице html - PullRequest
Новая
       28

Распечатайте данные о погоде API также на странице html

0 голосов
/ 15 апреля 2020

Я тоже пытаюсь написать очень простое c приложение Weather, которое извлекает данные из этого API https://openweathermap.org/api. Когда я нажимаю на ссылку тоже go из дома. html файл тоже с погодой. 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>

Это код для домашней страницы. html, который также ссылается на файл 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'];
    }
    )
  }
}

Это код для данных. html file 

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 .

1 Ответ

0 голосов
/ 15 апреля 2020

Код снизу, похоже, что вы хотите перенаправить на какую-то страницу, хотя у вас есть ответ от API. Вместо перенаправления ссылки попробуйте создать новую страницу и передать ответ. 

    <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.pu sh (component_name, {ifData) : this.weather});

А после перехода на новую страницу компонента используйте NavParams. Объявите navParams: NavParams и используйте navParams.get ("ли" Дата ");

...