Ionic3 - „Daten ist nicht definiert“ #Fetch #Http

Question

Hey ich versuche, die Daten zu nutzen, die ich geholt gerade von einem Sohn-Datei auf Ionic 3. Aber nichts

Hier ist mein component.html erscheint:

<h2>Hello</h2> 
<h2>Your in "{{data[0].team_name}}"</h2> 
<div>Start at: {{data[0].start}}</div> 
<div>Stop at: {{data[0].stop}}</div> 

mein component.ts:

import { Component, OnInit } from '@angular/core'; 
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular'; 
import { HttpProvider } from "../../providers/http/http"; 

export class CheckPage implements OnInit{ 

data; 

ngOnInit():void{ 
    this.httpProvider.getJsonData() 
    .subscribe(data => { 
     this.data = data; 
     console.log(this.data); 
     return this.data; 
    }, 
    err =>{ 
     console.error("Error : "+err); 
    }, 
    () => { 
     console.log('getData completed'); 
     console.log(this.data); 
    } 
    ); 
console.log(this.data); 

}; }

mein Provider:

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

@Injectable() 
export class HttpProvider { 

constructor(public http: Http) { 
    console.log('Hello HttpProvider Provider'); 
} 

getJsonData(){ 
    return this.http.get('../../assets/data/data.json').map(res => res.json()); 
} 

}

Auf meiner Konsole habe ich ein Array mit allen Daten, die ich gerade geholt:

[…] 
0: Object { id: 1, company_name: “Condo”, address: “213 Grove Street”, … } 
1: Object { id: 2, company_name: “Ikea”, address: “213 Ikea Street”, … } 
2: Object { id: 3, company_name: “McDo”, address: “213 McDo Street”, … } 
length: 3 
proto: Array [] 

+ eine Fehlermeldung : TypeError: _co.data ist undefined

Bitte was mache ich falsch?

Answer 1

Das Problem hier ist, dass die Ansicht dargestellt wird, bevor das Objekt definiert wird. Der Grund, warum Sie diesen spezifischen Fehler erhalten haben, ist, dass data speziell nicht definiert war und Sie darauf zugegriffen haben. Aktualisieren Sie Ihre Logik so, dass nur die Ergebnisse angezeigt werden, wenn sie verfügbar sind. Konstrukte wie ngFor werden sich darum kümmern. Sie können es auch mit ngIf so schützen.

<div ngIf=data[0]> 
    <h2>Hello</h2> 
    <h2>Your in "{{data[0].team_name}}"</h2> 
    ... 
</div>