ang2クラスの変数へのHTTP応答の設定

Question

私はhttp呼び出しを行い、ローカルjsonファイルからデータを取得しています。応答が遅れているため、テンプレートに応答データを表示できません。

サービスがjsonファイルからデータを取得するためのHTTP呼び出しを行っています。

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

私自身が解決策を見つけました。私はちょうどそれが正常に動作します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 
     ); 
} 

ようにした後、プロバイダやサービスコンストラクタのHTTP呼び出しを行っています。とにかくおかげさまで！

Answer 2

HTTPを置くことをお勧めしませんが、コンストラクタで呼び出します（詳細については、これを見る - Difference between Constructor and ngOnInit）

それはどんな空間の待ち時間が発生することはありませんあなたはngOnInitまたはionViewDidLoadに入れた場合 - それを試してみてください。

また、コードサンプルでコンストラクタが2番目に表示されます（ngOnInitの後） - エラーは発生しませんが、非常に非標準です。