角度材质设计<mat-step>数据未显示

Question

我正在以角度安装材质，并在添加步进器 html 代码、css 并导入 app.module.ts 文件中的所有 mat 模块后，但现在步进器正在显示，但步进器数据在 html 中不可见

<mat-stepper  #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" label="Fill out your address">
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>

模块

import:[
MatCheckboxModule,
    MatDialogModule,
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatSlideToggleModule,
    MatButtonToggleModule,
    MatIconModule
],
declarations:[
HomeComponent
]

我正在以角度安装材质，并在添加步进器 html 代码、css 并导入 app.module.ts 文件中的所有 mat 模块后，但现在步进器正在显示，但步进器数据在 html 中不可见

Answer 1

如Angular Material 入门中所述，您需要将

BrowserAnimationsModule

导入到您的应用程序中。

3. 为 Angular Material 设置浏览器动画：

将 BrowserAnimationsModule 导入到您的应用程序中可以启用 Angular 的动画系统。拒绝此项将禁用大多数 Angular Material 的动画。

对于非独立组件 Angular 应用程序，将

BrowserAnimationsModule

添加到根模块的

imports

数组中。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule ({
  imports: [
    BrowserAnimationsModule,
  ],
  ...
})
export class class AppModule {}

对于独立组件 Angular 应用程序，导入

provideAnimations

。

import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(App, { providers: [provideAnimations()] });