角度菜单显示不正确

Question

我正在学习角度显示，我创建的材质菜单显示不正确。根据我添加的代码，它应该显示与此图像相同的图像。

这是我的代码：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<button mat-button> Products</button>



<mat-menu #menu="matMenu" overlapTrigger="true">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

我的html中也显示了一些图像，并且得到以下输出：

我没有收到任何控制台错误，这是我的导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { ProductComponent } from './product/product.component';
import {  BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  MatMenuModule,
  MatButtonModule,
  MatIconModule,
  MatGridListModule,
  MatListModule
} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    WelcomeComponent,
    ProductComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatMenuModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatGridListModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第一个问题是为什么我的选择是灰色的？第二个问题是为什么我的覆盖层无法正常工作？谢谢。

Answer 1

基于您提供的代码，您的HTML很好，而且您似乎已包含必需的材料模块。鉴于您的问题与样式有关，我的假设是您没有在项目中正确导入角度材料样式。

许多人只需要在应用程序的主 styles.css 文件中添加主题。在您的** styles.css *文件顶部包含以下代码，看看是否可以解决您的问题。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';