Доступ к данным в сервисе со страницы ionic

Question

Я пытаюсь получить данные из API и хочу отобразить их на странице.Но я не могу достичь данных за пределами функции подписки.Я хочу знать, как проще всего получить данные, предоставленные поставщиком / службой.Я знаю, что могу просто поместить функцию в мой HomePage.ts, но это очень уродливый способ кодирования.Ни один из похожих ответов не дал надежного решения моей проблемы.

rayer-data.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';;
import { Times } from '../../app/times';

@Injectable()
export class PrayerDataProvider {

  tijdenLijst: any[];
  vandaag: Date = new Date();

  constructor(public http: HttpClient) {
    this.loadData();
  }

  loadData() : void {
    //console.log(this._data);
    this.http.get("http://api.aladhan.com/v1/calendarByCity?city=Amsterdam&country=" +
    "The%20Netherlands&method=1&school=1&month=9&year=2018")
    .subscribe(data => {
      //works
      this.tijdenLijst = data.data[0].timings;
      console.log(this.tijdenLijst);
    });
    //undefined
    console.log(this.tijdenLijst);
  }


}

HomePage.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import 'rxjs/add/operator/map';
import { PrayerDataProvider } from '../../providers/prayer-data/prayer-data';
import { Times } from '../../app/times';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  tijdenVandaag: Times[];
  tijden: Times;
  constructor(public navCtrl: NavController, public navParams: NavParams, private provider: PrayerDataProvider) {
  }

  getTimes(): void {  
  }

  ionViewDidLoad() {
  }

}

Как мне вызвать данные здесь (в HomePage.ts)?Я перепробовал десятки способов.Но не могу заставить его работать.Я тоже попробовал наблюдаемые.Но, похоже, я не знаю, как правильно с ними работать.Хорошие решения будут оценены ОЧЕНЬ высоко.Также в решениях не могли бы вы дать конкретные инструкции.Я программирую с этим фреймворком с 2 дней, поэтому я не очень опытный.Помилуй!

Answer 1

Я предполагаю, что "Times" - это ваш DTO, который описывает данные, возвращаемые вашим API.

В этом случае я бы изменил loadData в вашем провайдере так:

loadData() : Observable<Times[]> {
    return this.http.get<Times[]>("http://api.aladhan.com/v1/calendarByCity?city=Amsterdam&country=" +
    "The%20Netherlands&method=1&school=1&month=9&year=2018");
  }

В ionViewDidLoad () вы можете затем вызвать эту функцию и сохранить выходные данные в вашей переменной класса "tijdenVandaag", чтобы сделать ее доступной в вашем компоненте следующим образом:

ionViewDidLoad() {
 this.provider.loadData().subscribe( r => this.tijdenVandaag = r, e => console.error(e));
}

В HTML-шаблоне home.html вы можете затемпродолжайте и визуализируйте данные так, как вы хотите.

Просто убедитесь, что вы обрабатываете начальный случай, когда значение равно нулю, пока оно не будет загружено.Так что, возможно, оберните его * ngIf следующим образом:

<ng-container *ngIf="tijdenVandaag != null">
    <div *ngFor="let t of tijdenVandaag>{{t.id}}</div>
</ng-container>