来自 Angular 5 中 json 对象的动态嵌套材质菜单 [英] Dynamic nested Material menu from json object in Angular 5

问题描述

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

我今天第一次开始使用 Angular Material Design，我正在尝试使用 Material Design 创建嵌套菜单.

我尝试构建它运行 *ngFor 这样的主菜单，然后在每个子菜单上分开，但它以错误结束.

<button mat-button [matMenuTriggerFor]="main_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 也很陌生

解决方案

以下结构应该适合您:

我的菜单<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-容器></mat-menu>

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

Stackblitz 示例

How to create dynamic nested menu from json object?

I started using Angular Material Design today for the first time and I'm trying to create nested menus using material design. The documentation is pretty straight forward for static stuff.

But I need to create dynamic nested menu from json object and I can't find a simple solution to this anywhere. It just needs to be one level deep.

json object(not set in stone):

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

which would generate something like this but dynamically: expected result example at stackblitz

I tried building it running *ngFor like this for main menu and then separate on each sub menu but it ended in errors.

<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>

I know it's wrong but that's where my understanding of angular ended.

objectKeys just returns all the keys of the object using Object.keys which is loaded from the ts file.

objectKeys = Object.keys;

PS. I'm fairly new to Angular also

解决方案

The following structure should work for you:

<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>

Since I placed sub_menu inside the embedded template (*ngFor) we can use the same name for template reference variable(#sub_menu).

Stackblitz Example

这篇关于来自 Angular 5 中 json 对象的动态嵌套材质菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！