Ionic2：沒有提供ConnectionBackend？

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

你必須導入HttpModule在imports節中app.module.ts 另外，從供應商刪除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, 

    ] 
}) 

請參閱此highly voted answer以及。