AngularJS 4 & Ionic 3: Impossible de remplir le menu Ionic à partir du fichier JSON en raison de la nature asynchrone de http.get()

Question

Je suis relativement nouveau à Angular JS et mon premier projet est de construire une application web mobile en utilisant le framework Ionic. Pour une raison quelconque, mon fichier JSON contenant toutes les options du menu n'est pas lu dans mon composant App.

Ma variable menu_labels qui est supposée être un tableau des propriétés JSON retourne comme 'non défini', ce qui signifie que ma directive * ngFor est ignorée.

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

Après une recherche à travers de nombreuses questions semblables à cela, j'ai déterminé que la question est probablement dû à la demande http étant async, et ne pas retourner dans le temps à utiliser mon doc html. Cependant, les correctifs pour eux ne fonctionnent pas pour mon problème.

Un extrait de mon fichier JSON ressemble à ceci:

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

Je crois que le problème est soit dans la façon dont j'utiliser la fonction http.get() dans ma classe MyApp des app.component.ts fichier:

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

Ou la façon que j'essaie de gérer les données asynchrones dans mon fichier 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> 
. 
. 
. 

J'ai essayé d'utiliser * ngIf dans la balise <ion-list> pour gérer l'appel asynchrone mais le même résultat. Est-ce que quelqu'un peut me dire quelle partie de mon code est le problème dans? Je me suis gratté la tête pendant des heures. Je m'excuse à l'avance pour tout code qui fait mal à regarder. C'est aussi mon premier projet AngularJS, donc même si j'ai suivi plusieurs cours sur les bases, je suis sûr que ma mise en œuvre est très moche pour quelqu'un de plus expérimenté.

Answer 1

Je pense que problème avec cette ligne,

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