如何从json对象创建动态嵌套菜单?
我今天第一次开始使用Angular 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>
我知道这是错的,但那是我对棱角的理解结束了。
objectKeys只使用从ts文件加载的Object.keys
返回对象的所有键。
objectKeys = Object.keys;
PS。我也是Angular的新手
答案 0 :(得分:21)
以下结构适合您:
<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
)。
答案 1 :(得分:4)
Here is a StackBlitz example基于JSON的任意深度嵌套(由@Splaktar编写)
任意嵌套的关键是自引用 menu-item.component :
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {NavItem} from '../nav-item';
@Component({
selector: 'app-menu-item',
templateUrl: './menu-item.component.html',
styleUrls: ['./menu-item.component.scss']
})
export class MenuItemComponent implements OnInit {
@Input() items: NavItem[];
@ViewChild('childMenu') public childMenu;
constructor(public router: Router) {
}
ngOnInit() {
}
}
<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
<span *ngFor="let child of items">
<!-- Handle branch node menu items -->
<span *ngIf="child.children && child.children.length > 0">
<button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.displayName}}</span>
</button>
<app-menu-item #menu [items]="child.children"></app-menu-item>
</span>
<!-- Handle leaf node menu items -->
<span *ngIf="!child.children || child.children.length === 0">
<button mat-menu-item [routerLink]="child.route">
<mat-icon>{{child.iconName}}</mat-icon>
<span>{{child.displayName}}</span>
</button>
</span>
</span>
</mat-menu>