Ionic永远不会加载api数据

时间:2017-11-26 17:14:17

标签: json angular ionic-framework

我已经设置了一个离子加载屏幕,当应用程序从我正在使用的API端点加载数据时运行。问题是离子应用程序永远不会解除加载屏幕并显示数据。当我检查离子调用之外的url时,已经加载了json数据。我不确定为什么永远不会在应用程序中调用它。

以下是调用数据的页面:

import { Component } from '@angular/core';

import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  data: any;
  loading: any;

  constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: 'Please wait while data is loading'
    });
    this.getdata();
  }

  getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
      result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        this.loading.dismiss();
        console.log('getData completed');
     }
   );
 }
}

以下是RestServices.ts:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  getJsonData() {
    // return Promise.resolve(this.data);

     return this.http.get('url_is_here').map(res => res.json());
   }

}

是否有人知道可能导致此问题的原因,如果是调用json数据本身的问题,或者是否是解决加载屏幕的问题?我很困惑,因为应用程序运行时没有任何错误消息。

1 个答案:

答案 0 :(得分:2)

你的getData应该是这样的,

getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
    result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
        this.loading.dismiss();
    },
    err => {
        console.error("Error : " + err);
        this.loading.dismiss();
    } 
);