Question

我刚开始使用JSON，需要一些帮助。我有一个Angular 7 Web应用程序中使用的JSON对象，该对象具有多个数组。每个数组都有一个菜单标题和一个带有按钮标题和链接的子数组。在我看来，我将使用ngFor指令遍历JSON对象并检索菜单的数组。但是，正如预期的那样，它可以打印所有菜单，而不仅仅是我需要的菜单。我尝试建立索引，但只是错误，并说找不到JSON文件。我不是在查看JSON管道，但不确定如何从JSON对象获取单个数组，然后循环遍历子数组以显示所有按钮。

const items = [
  {
    "menu": "firstMenu",
    "icon": "myicon",
    "buttons": [
      {
        "Btn": "My Button",
        "link: "/mylink"
      },
      {
        "Btn": "My Button2",
        "link: "/mylink"
      },
      {
        "Btn": "My Button3",
        "link: "/mylink"
      }
    ]
  },
  {
    "menu": "SecondMenu",
    "icon": "myicon",
    "buttons": [
      {
        "Btn": "My Button",
        "link: "/mylink"
      },
      {
        "Btn": "My Button2",
        "link: "/mylink"
      },
      {
        "Btn": "My Button3",
        "link: "/mylink"
      }
    ]
  }
];

<div *ngFor="let item of items" 
     class="quickTasks">
  <button [matMenuTriggerFor]="myMenu" mat-button>
    <mat-icon>{{item?.icon}}</mat-icon>
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #myMenu="matMenu">
    <button *ngFor="let sublist of item?.buttons"
            [routerLink]="sublist?.link" 
            class="matMenuButton taskMenu" 
            type="button">
      {{sublist?.label}}
    </button>
  </mat-menu>
  </div>

从Angular 7中的JSON文件中获得一个显示在UI中的结果

0 个答案: