Question

我正在尝试从API获取数据，并且希望将其显示在页面中。但是我似乎无法到达“订阅”功能之外的数据。我想知道什么是获取提供者/服务提供的数据的最简单方法。我知道我可以将函数放在HomePage.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

我假设“时间”是您的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中，继续以所需方式可视化数据。

只要确保您处理了初始情况，即该值为null直到加载它为止。因此，也许用* ngIf包裹它：

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

从页面离子访问服务中的数据

1 个答案: