如何在 ionic 3 中显示 json 数据

Posted 2023-03-13

【中文标题】如何在 ionic 3 中显示 json 数据

【英文标题】：How to display json data in ionic 3

【发布时间】：2017-12-12 18:19:50

【问题描述】：

我是 ionic 3 的新手，我想在我的 ionic 3 中获取包含我的数据的 JSON 所以我试图按照本教程进行操作： https://www.youtube.com/watch?v=vuc4dp0qHSc

项目离子信息：

https://prnt.sc/ft60lb

但我在控制台中看不到任何数据：

  https://prnt.sc/ft63rl

我在编辑器中的项目： https://i.stack.imgur.com/0jyPu.jpg

这里：package.json

  "name": "ts-test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": 
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  ,
  "dependencies": 
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.5.0",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  ,
  "devDependencies": 
    "@ionic/app-scripts": "1.3.12",
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "typescript": "2.3.4"
  ,
  "description": "An Ionic project"

这里是 reddit-data.ts

import  Injectable  from '@angular/core';
import  Http  from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the RedditDataProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class RedditDataProvider 

  constructor(public http: Http) 
    console.log('Hello RedditDataProvider Provider');

  
getRemoteData()
  this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot').map(res=>res.json()).subscribe(data => 
    console.log(data);
  );

这里：app.module.ts

import  NgModule, ErrorHandler  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  IonicApp, IonicModule, IonicErrorHandler  from 'ionic-angular';
import  MyApp  from './app.component';

import  AboutPage  from '../pages/about/about';
import  ContactPage  from '../pages/contact/contact';
import  HomePage  from '../pages/home/home';
import  TabsPage  from '../pages/tabs/tabs';

import  StatusBar  from '@ionic-native/status-bar';
import  SplashScreen  from '@ionic-native/splash-screen';
import  RedditDataProvider  from '../providers/reddit-data/reddit-data';
import  HttpModule  from '@angular/http';


@NgModule(
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [

    BrowserModule,
      HttpModule,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [

    StatusBar,
    SplashScreen,
    provide: ErrorHandler, useClass: IonicErrorHandler,
    RedditDataProvider
  ]
)
export class AppModule 

这里：home.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  RedditDataProvider  from '../../providers/reddit-data/reddit-data';
@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class HomePage 

  constructor(public navCtrl: NavController,public redditService:RedditDataProvider) 

  
ionicViewDidLoad()

  this.redditService.getRemoteData();

【参考方案1】：

在 home.ts

中尝试使用 .subscribe

ionicViewDidLoad()
     this.redditService.getRemoteData().subscribe(res => 
     console.log(res);
    );
  

同时添加提供者

@Component(
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [RedditDataProvider]
)

reddit-data.ts你可以改成

getRemoteData()
    return this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot')
      .map(res => res.json());
  

【讨论】：

在 home.ts 中我得到这个订阅不存在类型为“订阅”-在没有管理员的情况下运行项目是否可以，因为我以用户身份运行它？

这应该不是问题。检查此博客文章中的代码tomislavstankovic.com/blog/ionic2-prikaz-json-podatak-api 了解更多信息

是的，终于完成了，非常感谢你的帖子很有帮助

不客气，很高兴你解决了这个问题。是否可以将其标记为已接受，以便其他人可以轻松看到答案？