小编rai*_*n01的帖子

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

我今天第一次开始使用Angular Material Design,我正在尝试使用材质设计创建嵌套菜单.对于静态内容,文档非常简单.

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

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

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

这将生成类似这样但动态的:在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>

我知道这是错的,但那是我对棱角的理解结束了.

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

objectKeys = Object.keys;

PS.我也是Angular的新手