Ionic2:没有提供商的连接式提供者

Question

我正在尝试将JSON文件数据读取到我的HTML页面，但是获得'ConnectionBackend的'没有提供商！

请参见下面的代码

home.ts

import { Component } from '@angular/core';
import { NavController ,Platform} from 'ionic-angular';
import { SampleDataService } from '../../providers/sample-data-service';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myjsondata:any;
  constructor(public navCtrl: NavController, platform: Platform,
  sampleDataService:SampleDataService) {
                sampleDataService.getJsonData().subscribe((data) => {
                console.log("what is in the data ", data);
                this.myjsondata = data;
              });    
  }  
  ngOnInit(){}
}

app.component.ts

import { SampleDataService } from '../providers/sample-data-service';
import { Http } from '@angular/http';
@Component({
  templateUrl: 'app.html',
  providers:[SampleDataService,Http]
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform, public statusBar: StatusBar,
     public splashScreen: SplashScreen, sampleDataService:SampleDataService,
     http:Http) {
    statusBar.styleDefault();
    sampleDataService.getJsonData();
    this.initializeApp();

app.module.ts

import { SampleDataService } from '../providers/sample-data-service';
import { Http} from '@angular/http';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    About,
    Contact,
    AboutCity
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
    //AutoCompleteModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    About,
    Contact,
    AboutCity
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SampleDataService,
    Http
  ]
})

我尝试了很多，但没有得到解决方案，为什么此错误是。可以请任何人帮助我。

Answer 1

您必须在app.module.ts中的imports部分中导入HttpModule另外，从提供商中删除Http。

import { SampleDataService } from '../providers/sample-data-service';
import { HttpModule} from '@angular/http';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    About,
    Contact,
    AboutCity
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
    //AutoCompleteModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    About,
    Contact,
    AboutCity
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SampleDataService,
  ]
})

也请参见这个高度投票的答案。