角材料菜单

Question

我是Web编程的新手，正在从事Angle 9的开发，并希望使用angular material菜单组件创建一个子菜单。

没有编译错误，程序运行成功，但是子菜单不起作用，我无法理解原因。

我的组件和app.module.ts的代码在下面给出

nested-menu-component.html

<p>nested-menu works!</p>
<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu= "matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

app.module.ts

import { MaterialModule } from './material/material.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatMenuModule} from '@angular/material/menu';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NestedMenuComponent } from './nested-menu/nested-menu.component';  
@NgModule({
  declarations: [
    AppComponent,
    NestedMenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,
    MatMenuModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }