离子 2 手动重新加载以获取数据

Question

我正在使用一项服务从woocommerce获取产品。在服务的构造函数中，我做了一个HTTP get调用，该调用获取产品并订阅本地数据变量。然后我在服务中创建了一个getData()函数，它将获取的数据返回给myPage。然后从 myPage 中，我从组件页面的构造函数调用 getData() 函数，并将其分配给本地 product 数组。
问题是，当我的页面最初加载时，我的服务构造函数中的 HTTP get 调用尚未接收/订阅数据，因此getData()函数调用返回 null 数组，我必须在服务中收到数据后手动重新加载组件页面以获取我页面中的数据。

知道我在这里做错了什么吗？ 以及可能的解决方案。
谢谢。

这是我的代码。

 Service is fetching data from woocommerce.

 constructor(public http: Http) {
 console.log("itemservice constructor called")
 this.http.get(`${this.producturl}`).map(res=><Product[]>res.json()).subscribe(prods =>{
    console.log("inside subscribe");
    this.items=prods;
  });
  getData(){
     return this.items;
  }

调用 getData(( 的页面的代码

constructor(public nav: NavController, public categoryService: 
CategoryService, public itemService: ItemService, public loadingCtrl: 
LoadingController) 
{
    console.log("home page constructor");
    this.items = this.itemService.getData();
}

Answer 1

根据您的描述，看起来您确实可以从您的服务中获取数据，尽管我不确定您为什么将逻辑放在构造函数中，但看起来您错过了一些关于 Angular 的基本概念，它都是关于数据绑定的，因此您的页面/组件应该绑定到该可观察的数据， 并将在获取数据时自动"更新"。

不确定您的意图，但是我会这样做，最重要的是视图，注意：从未测试过

 constructor(public http: Http) {
 console.log("itemservice constructor called")
  }
  getData(){
 this.http.get(`${this.producturl}`).map(res=><Product[]>res.json()).subscribe(prods =>{
    console.log("inside subscribe");
    this.items=prods;
  });

调用 getData(( 的页面的代码

    constructor(public nav: NavController, public categoryService: 
    CategoryService, public itemService: ItemService, public loadingCtrl: 
    LoadingController) 
    {
 this.itemService.getData();
    }

视图：

<div  *ngFor="let item of itemService.items"  >
</div>