如何顯示在離子3

Question

我是新來ionic 3 JSON數據，我希望得到我的數據的JSON在我ionic 3 ，所以我試圖按照本教程： https://www.youtube.com/watch?v=vuc4dp0qHSc

項目ionic-信息：

https://prnt.sc/ft60lb 

但我看到在我的控制檯中沒有數據：

https://prnt.sc/ft63rl 

我的項目插件IDE編輯： 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

與.subscribe嘗試在home.ts

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

，並添加提供商

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

reddit的-data.ts您可以在home.ts 改變

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