angular2 http response setting для переменной класса

Question

Я делаю http-вызов для извлечения данных из локального json-файла. Из-за задержки в получении ответа я не могу отобразить данные ответа в шаблоне.

Служба выполняет вызов HTTP для извлечения данных из json-файла.

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


} 

Нижеприведенный компонент выполняет вызов для инициирования http-вызова.

export class ShowreviewPage { 

    items: Object; 

    ngOnInit(){ 
     this.items = this.dataBook.makeDataReady(); 
    } 

    constructor(public navCtrl: NavController, public navParams: NavParams, public dataBook: DataBook) { 
     this.items = this.dataBook.getBooks(); 

     } 

    ionViewDidLoad() { 
    console.log("ion View did Load",this.items); // empty array output 
    } 


} 

Я новичок в Angular2. Я изо всех сил пытаюсь понять, почему происходит отсрочка ответа?

Answer 1

Я нашел решение самостоятельно. Я только что сделал вызов HTTP в конструкторе или поставщика услуг после this.bookDetails = []; как

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

Он отлично работает. В любом случае, спасибо людям!

Answer 2

Это не рекомендуется ставить Http вызовов в конструкторе (см это для получения дополнительной информации - Difference between Constructor and ngOnInit)

Это не должно вызывать какие-либо задержки, если пространственные вы поместите его в ngOnInit или ionViewDidLoad - попробуйте.

Кроме того, в вашем примере кода конструктор появляется вторым (после ngOnInit) - это не вызовет ошибки, но это очень нестандартно.