Question

我对Angular JS相对较新，我的第一个项目是使用Ionic框架构建移动Web应用程序。无论出于何种原因，我的包含所有菜单选项的JSON文件都没有被读入我的App组件。

我的menu_labels变量应该是JSON属性的数组，它返回为'undefined'，这意味着我的* ngFor指令被跳过了。

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

在搜索了与此类似的许多问题之后，我确定问题可能是由于http请求是异步的，并且没有及时返回以供我的html doc使用。但是，对他们的修复并不适用于我的问题。

我的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

我觉得这行有问题，

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

AngularJS 4＆amp; Ionic 3：由于http.get（）调用的异步性质，无法从JSON文件填充Ionic菜单

1 个答案: