如何在Angular 5中基于JSON对象创建Angular Material动态嵌套菜单

嘿，作为Angular和Angular Material的新手，能自己尝试写动态嵌套菜单已经超棒啦！我来帮你梳理下问题，然后给出简单可行的解决方案～

先说说你代码里的核心问题 #

1. 子菜单遍历逻辑错误：你遍历主菜单键的时候，把键（比如'main1'）当成了子菜单数组来遍历，应该用my_menu[mainKey]来获取对应的子项数组。
2. 模板引用变量关联错误：主菜单里的[matMenuTriggerFor]="main_item"是把字符串（主菜单键）当成了菜单引用，这显然不对，得让它指向对应的子菜单实例。

简单可行的动态嵌套菜单实现方案 #

这个方案不需要复杂的TS逻辑，只用模板就能搞定，特别适合新手：

第一步：组件TS代码

保持你的基础配置，只需要定义菜单数据和objectKeys即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-menu',
  templateUrl: './dynamic-menu.component.html'
})
export class DynamicMenuComponent {
  // 你的菜单数据（可以按需调整）
  my_menu = { 
    'main1': ['sub1', 'sub2'], 
    'main2': ['sub1', 'sub2'], 
  };
  // 把Object.keys暴露给模板使用
  objectKeys = Object.keys;
}

第二步：模板HTML代码

这里的关键是用模板变量数组来关联主菜单和子菜单：

<!-- 主菜单触发按钮 -->
<button mat-button [matMenuTriggerFor]="mainMenu">My Menu</button>

<!-- 主菜单容器 -->
<mat-menu #mainMenu="matMenu">
  <!-- 遍历主菜单的每个键，用index关联对应的子菜单 -->
  <button 
    *ngFor="let mainKey of objectKeys(my_menu); index as i"
    mat-menu-item
    [matMenuTriggerFor]="subMenus[i]"
  >
    {{ mainKey }}
  </button>
</mat-menu>

<!-- 动态生成子菜单：#subMenus会自动变成数组，对应主菜单的索引 -->
<mat-menu *ngFor="let mainKey of objectKeys(my_menu)" #subMenus>
  <!-- 遍历当前主菜单键对应的子项数组 -->
  <button 
    *ngFor="let subItem of my_menu[mainKey]"
    mat-menu-item
  >
    {{ subItem }}
  </button>
</mat-menu>

代码解释 #

• 主菜单里用*ngFor遍历my_menu的所有键，同时用index as i记录当前索引。
• 子菜单的模板变量#subMenus在*ngFor循环中会自动变成一个数组，主菜单通过subMenus[i]就能精准关联到对应的子菜单。
• 子菜单里通过my_menu[mainKey]获取当前主菜单键对应的子项数组，再遍历生成子菜单项。

这样就能完美实现你想要的基于JSON的动态一级嵌套菜单啦～

内容的提问来源于stack exchange，提问作者rain01