从页面 ionic 访问服务中的数据

Question

我正在尝试从API获取数据，我想在页面中显示它。但是我似乎无法访问"订阅"功能之外的数据。我想知道访问提供商/服务提供的数据的最简单方法是什么。我知道我可以把这个功能放在我的主页.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);
}

}

首页：

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() {
}
}

我如何在这里调用数据(在主页中(？我已经尝试了几十种方法。但似乎无法让它工作。我也尝试了可观察量。但我似乎不知道如何正确处理它们。好的解决方案将不胜感激。同样在解决方案中，您能否提供具体说明。我从 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 模板主页中.html您可以继续以所需的方式可视化数据。

只需确保处理初始情况，当值为 null 时，直到加载为止。所以也许用 *ngIf 像这样包装它：

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