从本地Json文件离子3获取数据

Question

我在Ionic开始一个虚拟项目。我尝试从本地Json文件获取数据，但我有这个错误：

我不明白为什么没有HttpClient的提供者。 有关详细信息，我实际上尝试按照本教程进行操作：https://www.youtube.com/watch?v=vuc4dp0qHSc

如何解决此错误并获取数据？

版本

Ionic 3.18.0

Angular 5.0.1

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FirstPage } from '../pages/first/first';
import { CardsDataProvider } from '../providers/cards-data/cards-data';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    FirstPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CardsDataProvider,

  ]
})
export class AppModule {}

卡-data.ts

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

/*
  Generated class for the CardsDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class CardsDataProvider {

  constructor(public http: HttpClient) {
    console.log('Hello CardsDataProvider Provider');
  }

  getLocalData() {
  this.http.get('../assets/data/cards.json').map(res => res.json()).subscribe(data => 
  {
    console.log(data);
  });  
}
}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirstPage } from '../first/first';
import { CardsDataProvider } from '../../providers/cards-data/cards-data';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public CardsService: CardsDataProvider) {

  }
  openFirstPage() {
    this.navCtrl.push(FirstPage);
  }

  ionViewDidLoad() {
    this.CardsService.getLocalData();
  }
} 

任何帮助将不胜感激。

Answer 1

在使用带有Angular5的Ionic3时，您正在关注Ionic2教程。

要使Http从Ionic 3.0开始工作，您需要在 app.module.ts 中的导入中加入HttpClientModule。

import {HttpClientModule} from '@angular/common/http';//import

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule//include here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    FirstPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CardsDataProvider,

  ]
})
export class AppModule {}

另外，在 cards-data.ts ，

中

import {Http} from '@angular/common/http';

@Injectable()
export class CardsDataProvider {

  constructor(public http: HttpClient) { //change here
    console.log('Hello CardsDataProvider Provider');
  }

要进一步更改从Ionic 2到3检查here。要进行Angular 5所需的更改，请检查here。

更简单的方法是找到更新的教程。