Как получить mat-menu от json

Question

 <mat-menu #metrics="matMenu">
    <ng-container *ngFor="let metric1 of objectKeys(my_metrics)">
        <button mat-menu-item [matMenuTriggerFor]="sub_menu_1">{{metric1}}</button>
        <mat-menu #sub_menu_1="matMenu">
          <button mat-menu-item [matMenuTriggerFor]="sub_menu_2"></button>
            <ng-container *ngFor="let metric2 of Object.keys(metric1)">
               <button  mat-menu-item [matMenuTriggerFor]="sub_menu_2">{{metric2}}</button>
               <mat-menu #sub_menu_2="matMenu">
                  <button *ngFor="let metric3 of metric1[metric2]" mat-menu-item>{{ metric3 }}</button>
               </mat-menu>
            </ng-container>
        </mat-menu>
        <!-- <mat-menu #sub_menu_1="matMenu">
                <button *ngFor="let metric2 of objectKeys(metric1)" mat-menu-item [matMenuTriggerFor]="metric2">{{metric2}}</button>
          </mat-menu> -->
    </ng-container>
  </mat-menu> 


  objectKeys = Object.keys;
      my_metrics = {
        'Remote copy metrics': {
            'IOPS': ['Read', 'Write'],
            'kbps': ['Read', 'Write'],
            'Service time': ['Read', 'Write'],
            'QLEN': ['Read', 'Write']
        },
        'Disk metrics': {
          'IOPS': ['Read', 'Write'],
          'kbps': ['Read', 'Write'],
          'Service time': ['Read', 'Write'],
          'QLEN': ['Read', 'Write']
        },
    }; 

Я также добавил файл .ts. Я обработал пример кода, но он не работает.

Как получить mat-menu от json динамически ??

Прикрепление ниже изображения для справки.