我试图从我的api中提取数据,并将其填充到我的ionic应用程序中,但当我进入应该填充数据的页面时,它崩溃了.下面是我的两个.ts文件:

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: `
        <ion-spinner></ion-spinner>`
    });
    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');
     }
   );
 }
}

另一个文件:

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').map(res => res.json());
   }

}

我也try 过使用HttpModule,但这是一个致命的错误.错误如下所示:

Error: Uncaught (in promise): Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
    at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)

我不确定为什么会出现无提供者错误,因为这是通过ionic framework创建的提供者

推荐答案

为了在应用程序中使用Http,您需要将HttpModule添加到应用程序中.单元ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ]

EDIT

如下面的 comments 所述,100现在是101,使用102;确保104数组中有103

Typescript相关问答推荐

如何使用Generics保留构造函数的类型信息?

在TypScript手册中可以视为接口类型是什么意思?

了解TS类型参数列表中的分配

带有联合参数的静态大小数组

如何为ViewContainerRef加载的Angular组件实现CanDeactivate保护?

有没有可能使用redux工具包的中间件同时监听状态的变化和操作

有没有办法解决相互影响的路由之间的合并?

无法正确推断嵌套泛型?

获取函数中具有动态泛型的函数的参数

Angular 17子路由

正交摄影机正在将渲染的场景切成两半

有没有可能创建一种类型,强制在TypeScrip中返回`tyPeof`语句?

在TypeScript中扩展重载方法时出现问题

对有效枚举值的常量字符串进行常规判断

Typescript,如何在通过属性存在过滤后重新分配类型?

创建一个函数,该函数返回一个行为方式与传入函数相同的函数

字符串文字联合的分布式条件类型

如何创建一个将嵌套类属性的点表示法生成为字符串文字的类型?

窄SomeType与SomeType[]

我可以使用对象属性的名称作为对象中的字符串值吗?