2017-01-04 6 views
0

Ich mache http Anruf, um die Daten aus der lokalen JSON-Datei zu holen. Aufgrund der verspäteten Antwort kann ich die Antwortdaten auf der Vorlage nicht anzeigen.angular2 http Antwort Einstellung auf Klassenvariable

Der Dienst ruft einen HTTP-Aufruf ab, um die Daten aus der JSON-Datei abzurufen.

export class DataBook { 

    bookDetails: Array<Object>; 

    constructor(public http: Http) { 
     this.bookDetails = []; 

    } 

    makeDataReady(){ 
    this.http.get('assets/preloaded-data/booksummaries.json') 
        .map(res => res.json()) 
        .subscribe(
          data => this.bookDetails = data, 
          error => alert(error), 
          () => console.log(this.bookDetails) //output the json file content 
          ); 
    } 

    appendBook(book:Object) 
    { 
    this.bookDetails.push(book); 
    } 

    getBooks():Array<Object> 
    { 
    return this.bookDetails; 
    } 


} 

Die folgende Komponente ruft den Aufruf des HTTP-Aufrufs auf.

Ich bin neu in Angular2. Ich habe Mühe zu verstehen, warum es eine Verzögerung in der Antwort gibt?

Antwort

0

Ich habe die Lösung selbst gefunden. Ich habe gerade den http-Aufruf in dem Provider oder Service Konstruktor nach this.bookDetails = []; wie

constructor(public http: Http) { 
    this.bookDetails = []; 
    this.init(); 

} 


init(): void { 
    this.http.get('assets/preloaded-data/booksummaries.json') 
     .map(res => res.json()) 
     .subscribe(
      data => this.bookDetails = data, 
      error => alert(error), 
      () => console.log(this.bookDetails) //output the json file content 
     ); 
} 

Es funktioniert gut gemacht. Jedenfalls danke Leute!

0

wird empfohlen, es nicht Http setzen den Konstruktor ruft in (siehe diese für weitere Informationen - Difference between Constructor and ngOnInit)

Es sollte jede räumliche Latenz nicht verursachen, wenn Sie es in der ngOnInit oder ionViewDidLoad setzen - es versuchen.

Auch in Ihrem Codebeispiel erscheint der Konstruktor zweiten (nach ngOnInit) - es wird keinen Fehler verursachen, aber es ist sehr nicht-Standard.

+0

Ich legte den HTTP-Aufruf in der ngOnInit es funktioniert nicht mehr. – forethought

+0

HTTP-Anruf befindet sich in einem Dienst; Ich kann dort ngOnInit nicht benutzen – forethought

Verwandte Themen