从数据提供者/JSON（离子框架）中提取信息的问题

Question

我还是 Angular 和 ionic 的新手，我正在尝试制作一个 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}}。