I try to build nested(two levels) MatMenu in angular material components, but when I run it in browser, errors occurred.
component.html:
<!-- header -->
<div class="header">
<!-- nav -->
<div class="nav">
<ng-container *ngFor="let navMenu of navMenus">
<button mat-button [matMenuTriggerFor]="btnMenu">{{ navMenu.name }}</button>
<mat-menu #btnMenu="matMenu">
<ng-container *ngFor="let menu of navMenu.menus">
<ng-container *ngIf="!menu.children">
<a mat-button mat-menu-item href="{{ menu.url }}" target="_blank">{{ menu.name }}</a>
</ng-container>
<ng-container *ngIf="menu.children">
<button mat-button *ngIf="menu.children" [matMenuTriggerFor]="parentMenu"
mat-menu-item>{{ menu.name }}</button>
<mat-menu #parentMenu="matMenu">
<ng-container *ngFor="let child of menu.children">
<a mat-button mat-menu-item href="{{ child.url }}" target="_blank">{{ child.name }}</a>
</ng-container>
</mat-menu>
</ng-container>
</ng-container>
</mat-menu>
</ng-container>
</div>
</div>navMenus:
[{
"name": "Documentation",
"icon": "read",
"menus": [{
"name": "Java",
"url": "https://docs.oracle.com/en/java/javase/index.html"
}, {
"name": "Git",
"url": "https://git-scm.com/book/zh/v2"
}, {
"name": "Build",
"children": [{
"name": "Maven",
"url": "http://maven.apache.org/guides/index.html"
}, {
"name": "Gradle",
"url": "https://docs.gradle.org/current/userguide/userguide.html"
}]
}, {
"name": "Database",
"children": [{
"name": "MySql",
"url": "https://dev.mysql.com/doc/refman/8.0/en/"
}, {
"name": "PostgreSQL",
"url": "https://dohttps://www.postgresql.org/docs/current/index.html"
}]
}, {
"name": "Spring",
"url": "https://spring.io/projects"
}, {
"name": "MyBatis",
"url": "http://www.mybatis.org/mybatis-3/zh/index.html"
}, {
"name": "Web",
"children": [{
"name": "MDN",
"url": "https://developer.mozilla.org/zh-CN/"
}, {
"name": "Angular",
"url": "https://angular.cn/"
}, {
"name": "Ant.D",
"url": "https://ant-design.gitee.io/"
}]
}]
}, {
"name": "Study hard",
"icon": "code",
"menus": [{
"name": "GitHub",
"url": "https://github.com/",
"children": null
}, {
"name": "LeetCode",
"url": "https://leetcode.com/"
}]
}]errors:
ERROR Error: NG0300: Multiple components match node with tagname a
Angular 6 AppComponent_ng_container_2_ng_container_5_ng_container_1_Template app.component.html:10 Angular 9 AppComponent_ng_container_2_ng_container_5_Template app.component.html:9 Angular 22 RxJS 5 Angular 19 RxJS 17 ZoneAwarePromise Angular toPromise RxJS loadData app.service.ts:18 __awaiter tslib.es6.js:74 ZoneAwarePromise Angular __awaiter tslib.es6.js:70 loadData main.js:69 loadData app.component.ts:31 __awaiter tslib.es6.js:74 ZoneAwarePromise Angular __awaiter tslib.es6.js:70 loadData main.js:213 ngOnInit app.component.ts:19 Angular 24 core.js:5967 Angular 15 RxJS 5 Angular 19 RxJS 17
The error ponit to this line:
<a mat-button mat-menu-item href="{{ menu.url }}" target="_blank">{{ menu.name }}</a>Multiple components match node with tagname a
I dont't know why it happens
