Question

阅读页面后我不知道＆amp; Doc of Observers的页面如何操纵它。我只想使用外部API在屏幕上显示当天的天气。问题是，我得到了一个Obtableable我的班级，但没有任何效果。

这是我从API获取信息的提供者：

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

import { Observable } from "rxjs/Rx";
import { Http, Response } from "@angular/http";


@Injectable()
export class OpenWeatherProvider {
  apikey = 'ea91a7eab8e8b73b433086eb0244fc94';
  WeatherArr: Array<String> = [];


  constructor(public http: HttpClient) {

  }

  getWeatherPerLatLng(lat,lng) {
    return this.http.get<Weather>('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lng+'&units=metric&appid='+ this.apikey);
  }
}

export interface Weather{
  coord: {
    lon: number,
    lat: number
  },
  weather: [
    {
      id: number,
      main: String,
      description: String,
      icon: String
    }
  ],
  base: String,
  main: {
    temp: number,
    pressure: number,
    humidity: number,
    temp_min: number,
    temp_max: number
  },
  visibility: number,
  wind: {
    speed: number,
    deg: number
  },
  clouds: {
    all: number
  },
  dt: number,
  sys: {
    type: number,
    id: number,
    message: number,
    country: String,
    sunrise: number,
    sunset: number
  },
  id: number,
  name: String,
  cod: number
}

这是我的geoloc.ts来显示信息：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

 // importation des plugins
import { Geolocation } from '@ionic-native/geolocation';
import { OpenWeatherProvider, Weather } from '../../providers/meteo/open-weather-provider'
import { Test } from '../test/test';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from "rxjs/Rx"

@Component({
  selector: 'geoloc',
  templateUrl: 'geoloc.html'
})
export class Geoloc {   
    public lng = 0;
    public lat = 0;
    public loading: boolean = false;
    public weather$ : Observable<Weather>;

  constructor(public navCtrl: NavController, private geolocation: Geolocation, public platform: Platform, public Pro: OpenWeatherProvider) {
        platform.ready().then(() =>{
              this.loadPosition();
              const component = this;
        });
    }

    loadPosition(){
        this.geolocation.getCurrentPosition().then((resp) => {
        // resp.coords.latitude
        //let userPosition: LatLng = news LatLng(resp.coords.latitude,resp.coords.longitude);
        //console.log(resp.coords.latitude + ' ' + resp.coords.longitude);\
        this.lng = resp.coords.longitude;
        this.lat = resp.coords.latitude;
        this.weather$ = this.Pro.getWeatherPerLatLng(this.lat,this.lng);

        console.log('Demande de GetWeatherPerLatLng',this.weather$);
        });
    }

}

要互动的HTML：

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
      <ion-title>Geolocalisation</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content padding>
    <h2>{{ 'GPS' | translate}}</h2>
    <p>
      Latitude {{ lat }}, Longitude{{ lng }}
    </p>
    <p >
      <a href="../test/test.html">{{ 'MAPS' | translate}}</a>
    </p>
    <br/>
    <p>Country: {{weather$}}</p>
    <p></p>


</ion-content>

当我致电{{weather$}}时，它会显示在屏幕上：*Country: object Objects..*

这是我在console.log中看到的屏幕

Answer 1

当我拨打{{weather $}}时，它会显示在屏幕上：国家/地区：对象对象..

您正在打印一个可观察数据而不是数据。

如果要在html中打印可观察数据，可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <svg id = "oSvg" height = "900" width = "1200"></svg> <script> var svgns = "http://www.w3.org/2000/svg"; var rect = document.createElementNS(svgns, "rect"); rect.setAttributeNS(null, 'x', 100); rect.setAttributeNS(null, "y", 200); rect.setAttributeNS(null, "width", "200"); rect.setAttributeNS(null, "height", "300"); rect.setAttributeNS(null, "transform", "matrix(1, 0, 0, 1, 0, 0)"); rect.setAttributeNS(null, 'style', 'stroke:none; opacity: 0;') document.getElementById("oSvg").appendChild(rect); $(rect).on('click', function() { console.log("hello"); }); </script> </body> </html>管道。

要打印整个数据对象，请执行以下操作：

async

要遍历和打印属性，请执行以下操作：

{{weather$ | async}}

以上缺点是您需要继续订阅每个房产。更好的技术是：

{{(weather$ | async)?.base}}

角度/离子观察者和可观察者

1 个答案: