如何在 ionic 3 中显示 json 数据

Question

我是 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();

}
}

Answer 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());
  }