Zugriff auf Daten von API

Question

Ich bin neu in ionischen und eckigen. Ich möchte Daten von der API erhalten, aber ich kann nicht auf die Daten zugreifen.

Hier ist mein Code

public items: any; 

    constructor(
    public navCtrl: NavController, 
    public modalCtrl: ModalController, 
    public navParams: NavParams, 
    public http: Http) { 

    let headersToken = new Headers(); 
    headersToken.append('Authorization', 'Bearer token here'); 

    this.http.get('http://localhost:8000/api/data',{headers : headersToken}).map(res => res.json()).subscribe(data => { 
      this.items = data; 
     }); 

    }  

    ionViewDidLoad(){ 
    console.log(this.items); 
    } 

Und das Ergebnis IonViewDidLoad ist nicht definiert.

Answer 1

Möglicherweise ist Ihr HTTP-Aufruf nicht beendet, wenn IonViewDiDLoad aufgerufen wird. Versuchen Sie, ein Timeout festzulegen und zu überprüfen, ob es funktioniert. Andernfalls könnte es sein, dass Ihre HTTP-Anforderung nicht die richtigen Daten

Answer 2

Rückkehr Sie können es wie folgt tun:

Hinweis: Aufgrund der async Natur Sie müssen es tun, wie unten gezeigt.

ionViewDidLoad(){ 
    let headersToken = new Headers(); 
    headersToken.append('Authorization', 'Bearer token here'); 

    this.http.get('http://localhost:8000/api/data',{headers : headersToken}).map(res => res.json()).subscribe(data => { 
      this.items = data; 
      console.log(this.items); 
     }); 

    } 

Answer 3

Sie müssen verstehen, warum dies geschieht.

Http.get ist ein asynchroner Aufruf.

Die Art und Weise, wie Sie Ihren Code geschrieben haben, ist Ihre console.log(this.items); wird ausgeführt, bevor Sie die Ausgabe von http-Anruf erhalten haben oder bevor der Anruf abgeschlossen ist.

Um sicherzustellen, dass Sie Daten nach dem Anruf erhalten, müssen Sie die Konsole in subscribe setzen.

I unten console.log(this.items) innen hinzugefügt abonnieren

 this.http.get('http://localhost:8000/api/data',{headers : headersToken}) 
.map(res => res.json()) 
.subscribe(data => this.items = data, // 1st param where you get data 
      (error) => console.log(error), // error if any 
      () => conosle.log("call is finished"+this.items) // call is completed. here you call ionViewDidLoad() as well. 
      ); 

     }  

     ionViewDidLoad(){ 
     console.log(this.items); 
     } 

Ich hoffe, das hilft.