AngularJS 4＆Ionic 3：http.get（）コールの非同期性のためにJSONファイルからIonicメニューを取り込むことができません。

Question

Angular JSには比較的新しく、私の最初のプロジェクトはIonicフレームワークを使用してモバイルWebアプリケーションを構築しています。何らかの理由で、すべてのメニューオプションを含むJSONファイルがAppコンポーネントに読み込まれていません。

JSONプロパティの配列であると考えられる私のmenu_labels変数は、「未定義」として返されます。これは、my * ngFor指示文がスキップされることを意味します。これに似た多くの質問を検索した後

<ion-list-header *ngFor="let item of menu_labels; let i of index" no-lines no-padding>

、私は、問題はおそらくhttpリクエストが非同期であること、そして私のHTMLドキュメントで使用されるように、時間に戻っていないが原因であると判断しました。しかし、彼らのための修正は私の問題のために働いていません。

私のJSONファイルの抜粋は次のようになります。

{ 
"pages":[ 
    { 
     "title": "Home", 
     "component": "Homepage" 
    }, 
    { 
     "title": "News", 
     "component": "NewsPage" 
    }, 
    { 
     "title": "Mainframe Legacy and Managed Hosting", 
     "children": [ 
      { 
       "title": "Mainframe Outsourcing", 
       "component": "MainframeOutsourcing" 
      }, 
. 
. 
. 

私は問題があるのいずれかの方法で、私はapp.component.tsの私のMyAppクラスでhttp.get（）関数を使用すると信じてファイル：

// Save the parsed information from http.get() in menu_labels var 
menu_labels: any[]; 

constructor(public platform: Platform, public statusBar: StatusBar, 
      public splashScreen: SplashScreen, private http: Http) { 

    this.initializeApp(); 

    let menu_data = this.getData(); 
    menu_data.subscribe(data => { 
     this.menu_labels = data; 
    }) 
} 

getData() { 
    // parse information from json file containing menu structure 
    return this.http.get('../assets/main-menu.json').map(res=> res.json().items); 
} 

それとも私がapp.htmlファイルに非同期されているデータを処理しようとする方法で：

<ion-menu [content]="content"> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <!-- First Level --> 
     <ion-list-header *ngFor="let item of menu_labels; let i of index" no-lines no-padding> 
     <!-- Just Add Button If No Children --> 
     <ion-item *ngIf="!item.children" no-lines text-wrap> 
      <button ion-item (click)="openPage(item.component)">{{ item.title }}</button> 
     </ion-item> 
. 
. 
. 

<ion-list>タグで* ngIfを使用して、非同期呼び出しを処理しようとしましたが、同じ結果が得られました。

誰でも自分のコードのどの部分に問題があるのか​​教えていただけますか？私はこれ以上何時間も頭を悩ましてきました。私は見て傷ついているコードについては、先進的にお詫び申し上げます。これも私の最初のAngularJSプロジェクトです。基本についていくつかのコースを取ったにもかかわらず、私の実装はもっと経験豊富な人にはとても醜いようです。

Answer 1

データの後this.menu_labelsの出力を受信いただきました私はこのラインの問題、

return this.http.get('./main-menu.json').map(res=> res.json().pages);