在Angular Material中,下拉菜单的内容可以是动态生成的。如果无法正确触发动态内容,可能是因为菜单的触发事件没有正确绑定。
以下是一个示例解决方法:
mat-menu
指令创建下拉菜单,并将菜单内容绑定到一个方法或属性上:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
menuItems: string[] = ['Item 1', 'Item 2', 'Item 3'];
// 方法示例
getMenuItems(): string[] {
// 动态生成菜单项内容的逻辑
return this.menuItems;
}
}
MatMenuModule
和MatButtonModule
:import { NgModule } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { ExampleComponent } from './example.component';
@NgModule({
imports: [
MatMenuModule,
MatButtonModule
],
declarations: [ExampleComponent]
})
export class ExampleModule { }
通过以上方法,可以正确触发并显示动态生成的下拉菜单内容。