0

我尝试在角材料组件中构建嵌套（两级）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 的节点

我不知道为什么会这样

4

0 回答 0