Получить один результат, отображаемый в пользовательском интерфейсе из файла JSON в Angular 7

Question

Я новичок в использовании JSON и мне нужна помощь.У меня есть объект JSON, который я использую в своем веб-приложении Angular 7 с несколькими массивами.Каждый из массивов имеет заголовок меню и подмассив с заголовком кнопки и ссылкой.На мой взгляд, я собирался использовать директиву 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>