データプロバイダー/ JSON（イオンフレームワーク）から情報を引き出す際に問題が発生する

Question

私はまだ角張ってイオン性で新しく、私はpokedexアプリケーションを作ろうとしています。私は "ポケットモンスター"の配列を持つjsonファイルを作成しました。現在のところ、私はjsonファイルから情報を取り出して表示しようとしていますが、失敗しています。アプリケーションを実行すると、数字のリストが表示されます。私は何が間違っているのか分かりません。助けてもらえますか？私は、データプロバイダ、jsonファイル、およびホームコンポーネントとテンプレートを参照用に追加します。

<ion-header> 
 
    <ion-navbar> 
 
    <ion-title> 
 
     Pokedex 
 
    </ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content> 
 

 
    <ion-list> 
 
    <ion-item *ngFor="let pocketMonster of pocketMonsters; let i = index;"> 
 
     <ion-label>{{i+1}}</ion-label> 
 
    </ion-item> 
 
    </ion-list> 
 
    
 

 
    <!--<div *ngIf="pocketMonsters.length"></div> --> 
 

 
</ion-content>

import { Component } from '@angular/core'; 
 
import { ModalController, NavController } from 'ionic-angular'; 
 

 
import { pokemonDataService } from '../../providers/data/data'; 
 

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

 
export class HomePage { 
 

 
    pocketMonsters = []; 
 
    searchQuery: string = ''; 
 

 
    constructor(public navCtrl: NavController, public dataService: pokemonDataService) { 
 

 
    
 
    } 
 

 
    ionViewDidLoad() { 
 
    
 
      
 
    
 
      this.dataService.getAllPokemon().then((data) => { 
 
    
 
       data.map((pocketMonster) => { 
 

 
        
 
        return pocketMonster; 
 
    
 
       });  
 
    
 
       this.pocketMonsters = data; 
 
    
 
      }); 
 
    
 
     } 
 

 
    //ngOnInit(){ 
 
    //this.dataService.getAllPokemon() 
 
     //.subscribe(data => { 
 
     //this.pokemonList = data; 
 
    //}); 
 
    //} 
 

 
    
 

 
}

import { Injectable } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 
import 'rxjs/add/operator/map'; 
 

 

 

 
@Injectable() 
 
export class pokemonDataService { 
 
    
 
    data: any; 
 
    
 
    constructor(public http: Http) { 
 
    
 
    } 
 

 
    getAllPokemon() { 
 
     if(this.data){ 
 
     return Promise.resolve(this.data); 
 
    } 
 

 
    return new Promise(resolve => { 
 

 
     this.http.get('assets/data/pokemon.json').map(res => res.json()).subscribe(data => { 
 
      this.data = data.pocketMonsters; 
 
      resolve(this.data); 
 
     }); 
 

 
    }); 
 
     } 
 
    
 
    
 
    
 
}

{ 
 
    "pocketMonsters": [ 
 

 
     { 
 
      "pokemonName" : "Bulbasaur", 
 
      "pokedexNumber" : "001", 
 
      "description": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger", 
 
      "pokemonImage" : "<img src='assets/imgs/bulbasaur.png" 
 

 
     }, 
 

 
     { 
 
      "pokemonName" : "Ivysaur", 
 
      "pokedexNumber" : "002", 
 
      "description" : "", 
 
      "pokemonImage" : "<img src='assets/imgs/ivysaur.png" 
 
     } 
 
    } 
 
}

それは私が私の問題を考え出し

import { Component } from '@angular/core'; 
import { ModalController, NavController } from 'ionic-angular'; 

import { pokemonDataService } from '../../providers/data/data'; 

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

export class HomePage { 
    pocketMonsters = []; 
    searchQuery: string = ''; 

    constructor(public navCtrl: NavController, public dataService:pokemonDataService) {} 

    ionViewDidLoad() {  
     this.dataService.getAllPokemon().then((data) => {  
      data.map((pocketMonster) => { 
      > this.pocketMonsters = data; 
       return pocketMonster;  
      });  
     });  
    } 
} 

Answer 1

動作しませんので

Answer 2

あなたは機能を戻ってきています。それぞれのオブジェクトから必要なものにアクセスするには、{{pocketMonster ....}}を実行できます。例：{{pocketMonster.pokemonName}}。