为什么我的角度步进器没有样式？答案

【问题标题】：Why my angular stepper doesn't have style?为什么我的角度步进器没有样式？
【发布时间】：2020-06-02 20:21:41
【问题描述】：

最近我开始使用 Angular，我需要创建一个多步骤表单，首先安装它是一团糟，但最后它就在那里，但是当我在我的组件上使用它时它没有，完全没有风格，我搜索了很多网站和视频，但每个人都和我一样。知道是什么问题吗？

这是我的 app.module.ts：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DrawingsComponent } from './drawings/drawings.component';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import { MatStepperModule } from '@angular/material/stepper';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatPseudoCheckboxModule } from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DrawingsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatStepperModule,
    MatIconModule,
    MatButtonModule,
    MatPseudoCheckboxModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的例子：

<mat-horizontal-stepper>
  <mat-step label="Step 1">
    Content 1
  </mat-step>
  <mat-step label="Step 1">
    Content 2
  </mat-step>
</mat-horizontal-stepper>

Here is how it should look like

This is how it looks

【问题讨论】：

如果您手动执行此操作，请检查 index.html 文件中是否正确引用了所有样式表。您可以使用 ng add @angular/material 将 ng 材质添加到现有的 Angular 项目中。还可以查看此类文章以查找缺少的内容。 robferguson.org/blog/2018/11/05/…
你能发布整个component.ts 文件吗？有了这些信息，真的很难说你的代码有什么问题。例如，你能创建一个 StackBlitz 吗？
ng add @angular/material 有效，非常感谢，我知道这有点愚蠢，但我是第一次使用它。谢谢你们！

标签： angular debugging syntax stepper

【解决方案1】：

你在安装 Angular Material 时选择了主题吗？请看here

【讨论】：