从本地 Json 文件 ionic 3 获取数据 [重复]

Posted 2023-03-13

【中文标题】从本地 Json 文件 ionic 3 获取数据 [重复]

【英文标题】：get data from local Json file ionic 3 [duplicate]

【发布时间】：2018-05-13 18:20:42

【问题描述】：

我在 Ionic 中启动了一个虚拟项目。我尝试从本地 Json 文件中获取数据，但出现此错误：

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

如何修复此错误并获取数据？

版本

离子 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 

cards-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();
  
 

我们将不胜感激。

【参考方案1】：

在使用 Ionic3 和 Angular5 时，您正在学习 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。

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

【讨论】：

感谢您的回答。我没有解决这个问题。我试图找到一个 ionic 3 的教程，但我目前没有成功。如果您对如何在本地存储数据有任何建议，我很感兴趣。

@Ryley38 更新答案..