无法从数据提供者/ JSON（离子框架）中提取信息

Question

我仍然对角膜和离子膜还不熟悉，我正在尝试制作一个pokedex应用程序。 我创建了一个带有“口袋妖怪”数组的json文件。 截至目前，我正在尝试仅将信息从json文件中拉出并显示出来，但未成功。 当我运行该应用程序时，它仅显示带有数字的列表。 我不确定自己在做什么错。 有人可以帮忙吗？ 我将添加数据提供程序，json文件以及home组件和模板以供参考。

 <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" } } } 

Answer 1

您正在返回功能，所以它不起作用

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 2

我发现了我的问题。 我可以做{{pocketMonster ....}}来访问每个对象中需要的内容。 示例：{{pocketMonster.pokemonName}}。