ローカルjsonを画面に出力させようとしているのですが、下記のようにコンソールに出力できても、それを実際の画面に表示させることができません。
[src/pages/home/home.ts]
typescript
1import { Component } from '@angular/core'; 2import { NavController } from 'ionic-angular'; 3import { JsonData } from '../../providers/json-data'; 4 5 6@Component({ 7 selector: 'page-home', 8 template: ` 9<div *ngFor="let question of questions"> 10 <h3>Title: {{question.title}}</h3> 11</div>` 12}) 13 14export class HomePage { 15 16 data: any; 17 18 constructor(public navCtrl: NavController, public dataService: JsonData) { 19 this.data = dataService.getData(); 20 }
[src/providers/json-data.ts]
typescript
1import { Injectable } from '@angular/core'; 2import { Http } from '@angular/http'; 3import 'rxjs/add/operator/map'; 4 5@Injectable() 6export class JsonData { 7 8 data: any; 9 10 constructor(public http: Http) {} 11 12 getData(){ 13 return this.http.get('../assets/data/data.json') 14 .map(res => res.json()).subscribe(data => { 15 this.data = data.patients; 16 console.log(data); //←ここがコンソールで出力できています 17 return data; 18 }) 19 }
[src/assets/data/data.json]
json
1{ 2 "questions": [ 3 { 4 "title": "問01", 5 "slug": "h29-q01", 6 "img": "images/h29-q1.png", 7 "img_alt": "h29-q1", 8 "question_main": "日本の首都はどこか", 9 "question_description": "東京。(以下省略)", 10 "youtube_id": "YOUTUBE_VIDEO_ID" 11 }, 12 { 13 "title": "問02", 14 "slug": "h29-q02", 15 "img": "images/h29-q2.png", 16 "img_alt": "h29-q2", 17 "question_main": "アメリカの首都はどこか", 18 "question_description": "ワシントンD.C。(以下省略)", 19 "youtube_id": "YOUTUBE_VIDEO_ID" 20 }, 21 { 22 "title": "問03", 23 "slug": "h29-q03", 24 "img": "images/h29-q3.png", 25 "img_alt": "h29-q3", 26 "question_main": "イギリスの首都はどこか", 27 "question_description": "ロンドン。(以下省略)", 28 "youtube_id": "YOUTUBE_VIDEO_ID" 29 } 30 ] 31}
templateにある<h3>Title: {{question.title}}</h3>などが正常に動作させるには、どこを修正する必要があるでしょうか。
###[17/02/09 21:00 追記]表示できました!
下記のようにコードを変更したところ、無事出力されました。
[src/pages/home/home.html]
html
1<ion-header> 2 <ion-navbar> 3 <ion-title> 4 Ionic Blank 5 </ion-title> 6 </ion-navbar> 7</ion-header> 8 9<ion-content padding> 10 <div *ngFor="let question of questions;"> 11 <h3>Name: {{question.title}}</h3> 12 <h3>Description: {{question.question_description}}</h3> 13 </div> 14</ion-content>
typescript
1import {Component, OnInit} from '@angular/core'; 2import {NavController} from 'ionic-angular'; 3import {JsonData} from '../../providers/json-data'; 4 5 6@Component({ 7 selector: 'page-home', 8 templateUrl: 'home.html' 9}) 10export class HomePage implements OnInit { 11 12 constructor(public navCtrl: NavController, public dataService: JsonData) { 13 } 14 15 questions: any; 16 17 ngOnInit() { 18 this.getQuestion(); 19 } 20 21 getQuestion() { 22 this.dataService.getData().subscribe(questions => { 23 this.questions = questions.questions; 24 console.log(questions); 25 }); 26 }
[src/providers/json-data.ts]
typescript
1import { Injectable } from '@angular/core'; 2import { Http } from '@angular/http'; 3import 'rxjs/add/operator/map'; 4 5@Injectable() 6export class JsonData { 7 8 constructor(public http: Http) {} 9 10 getData(){ 11 return this.http.get('../assets/data/data.json') 12 .map(res => res.json()); 13 }; 14}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。