Question

我还是角色和离子的新手，我正在努力制作一个pokedex应用程序。我创建了一个带有＃34;口袋怪物＆＃34;数组的json文件。到目前为止，我试图将信息从json文件中提取并显示出来，但是我没有成功。当我运行应用程序时，它只显示一个带有数字的列表。我不确定我做错了什么。任何人都可以帮忙吗？我将添加数据提供程序，json文件以及主组件和模板以供参考。

＆＃13;

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim Folder, URL As String
    Folder = txtFolder.Text
    URL = txtUrl.Text
    txtCommand.Text = "C:\Users\Merskies\Desktop\Youtube-dl\youtube-dl.exe"
    dim Arguments as string ="-i -o D:\YoutubeDL\" & Folder & "\%%(title)s.%%(ext)s " & URL
    Try
        cmd.Kill()
    Catch ex As Exception
    End Try
    txtOutput.Clear()
    If Arguments <> "" Then
        psi = New ProcessStartInfo(txtCommand.Text, Arguments)
    Else
        psi = New ProcessStartInfo(txtCommand.Text)
    End If
    Dim systemencoding As System.Text.Encoding
    System.Text.Encoding.GetEncoding(Globalization.CultureInfo.CurrentUICulture.TextInfo.OEMCodePage)
    With psi
        .UseShellExecute = False
        .RedirectStandardError = True
        .RedirectStandardOutput = True
        .RedirectStandardInput = True
        .CreateNoWindow = True
        .StandardOutputEncoding = systemencoding
        .StandardErrorEncoding = systemencoding
    End With
    cmd = New Process With {.StartInfo = psi, .EnableRaisingEvents = True}
    AddHandler cmd.ErrorDataReceived, AddressOf Async_Data_Received
    AddHandler cmd.OutputDataReceived, AddressOf Async_Data_Received
    cmd.Start()
    cmd.BeginOutputReadLine()
    cmd.BeginErrorReadLine()
End Sub
Private Sub Async_Data_Received(ByVal sender As Object, ByVal e As DataReceivedEventArgs)
    Me.Invoke(New InvokeWithString(AddressOf Sync_Output), e.Data)
End Sub
Private Sub Sync_Output(ByVal text As String)
    txtOutput.AppendText(text & Environment.NewLine)
    txtOutput.ScrollToCaret()
End Sub
End Class

＆＃13;

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

＆＃13;

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;
    //});
  //}

  

}

＆＃13;

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);
        });

    });
      }
 
    
 
}

＆＃13;

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

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

2 个答案: