使用 *ngFor 构建嵌套的 Angular Material MatMenu 出现错误

问题描述

我尝试在角度材质组件中构建嵌套（两层）MatMenu，但是当我在浏览器中运行它时，发生了错误。

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>

导航菜单：

[{
    "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/"
    }]
}]

错误：

ERROR 错误：NG0300：多个组件匹配带有标记名 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

这一行的错误：

<a mat-button mat-menu-item href="{{ menu.url }}" target="_blank">{{ menu.name }}</a>

多个组件匹配带有标记名 a 的节点

我不知道为什么会这样

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）