这是我的 Angular Material 步进器的 HTML 代码:
<mat-horizontal-stepper class="stepper">
<mat-step label="Basic" state="cloud_download">
Step 1
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Pixels" state="settings">
<p>Step 2</p>
<button mat-button matStepperPrevious>Previous</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Creative" state="settings">
<p>Step 3</p>
<button mat-button matStepperPrevious>Previous</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Targeting" state="settings">
<p>Step 4</p>
<button mat-button matStepperPrevious>Previous</button>
<button mat-button matStepperNext>Next</button>
</mat-step>
<mat-step label="Review" state="settings">
<p>Step 5</p>
<button mat-button matStepperPrevious>Previous</button>
</mat-step>
</mat-horizontal-stepper>
这就是我将其导入到我的通用导入文件中的方式。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/* Added */
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatStepperModule} from '@angular/material/stepper';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
/* */
@NgModule({
declarations: [],
imports: [
CommonModule,
MatToolbarModule,
MatIconModule,
MatCheckboxModule,
MatStepperModule
],
exports:[
CommonModule,
MatToolbarModule,
MatIconModule,
MatCheckboxModule,
MatStepperModule
],
providers: [
{
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { displayDefaultIndicatorType: false }
}]
})
export class CommonImportsModule { }
但是步进器没有显示出它应该显示的内容。它只是显示如下直线:
1_______2________3。
我正在使用 Angular 9,问题是什么我还安装了 Angular Material,并且 Angular Material 中的其他东西运行良好。