angular - 来自 Angular 5 中的 json 对象的动态嵌套 Material 菜单

Question

如何从 json 对象创建动态嵌套菜单？

我今天第一次开始使用 Angular Material Design，我正在尝试使用 Material Design 创建嵌套菜单。 documentation对于静态内容非常简单。

但我需要从 json 对象创建动态嵌套菜单，但我无法在任何地方找到一个简单的解决方案。它只需要一层深。

json 对象(不是一成不变的):

my_menu = {
    'main1': ['sub1', 'sub2'],
    'main2': ['sub1', 'sub2'],
}

这会生成类似这样的东西，但是是动态的:expected result example at stackblitz

我尝试构建它运行 *ngFor 作为主菜单，然后在每个子菜单上分开，但它以错误告终。

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

<mat-menu #main_menu="matMenu">
  <button *ngFor="let main_item of objectKeys(my_menu)" mat-menu-item [matMenuTriggerFor]="main_item">{{ main_item }}</button>
  <button mat-menu-item [matMenuTriggerFor]="main2">main2</button>
</mat-menu>

<mat-menu *ngFor="let sub_menu of objectKeys(my_menu)" #sub_menu="matMenu">
  <button *ngFor="let sub_name of sub_menu" mat-menu-item>{{ sub_name }}</button>
</mat-menu>

我知道这是错误的，但我对 Angular 理解到此为止。

objectKeys 只是使用从 ts 文件加载的 Object.keys 返回对象的所有键。

objectKeys = Object.keys;

附言。我也是 Angular 的新手

Answer 1

以下结构应该适合您:

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

<mat-menu #main_menu="matMenu">
  <ng-container *ngFor="let mainItem of objectKeys(my_menu)">
    <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem }}</button>
    <mat-menu #sub_menu="matMenu">
       <button *ngFor="let subItem of my_menu[mainItem]" mat-menu-item>{{ subItem }}</button>
    </mat-menu>
  </ng-container>
</mat-menu>

由于我将 sub_menu 放在嵌入式模板 (*ngFor) 中，我们可以对模板引用变量使用相同的名称 (#sub_menu) .

Stackblitz Example