角/離子觀測器和可觀察的

Question

在閱讀了《 Docs on Observers》的頁面和頁面之后，我不知道如何操作它。 我只是想使用外部API在屏幕上顯示當天的天氣。 問題是，我在班級上取得了可觀察到的結果，但沒有任何效果。

這是我的提供商，可以從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中打印可觀察的數據，則可以使用async管道。

要打印整個數據對象，請執行以下操作：

{{weather$ | async}}

為了遍歷和打印屬性，請執行以下操作：

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

上面的缺點是您需要繼續訂閱每個屬性。 更好的技術是：

<div *ngIf="weather$ | async as weather">
    {{weather.base}}
    <!-- other properties of weather -->
</div>