如何在我的垫子步进器中隐藏垫子步进器标题？

Question

我正在使用 Angular-7 开发应用程序。在应用程序中，我使用了 Angular 材料的mat stepper。问题是，我如何隐藏mat-stepper 标头，如下图所示。我根本不希望它出现。

<mat-horizontal-stepper>
    <mat-step label="transaction">
        <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="personal">
        <button mat-button matStepperPrevious>Previous</button>
        <button mat-button matStepperNext>Next</button>
    </mat-step>
</mat-horizontal-stepper>

Answer 1

使用ngIf 来实现这一点。如果您想隐藏特定的mat-step，请将ngIf 放在mat-step 上。

<mat-step label="transaction" *ngIf="showStep">
    <button mat-button matStepperNext>Next</button>
</mat-step>

如果你想去掉整个mat-horizontal-stepper，那么把ngIf放在<mat-horizontal-stepper>上

<mat-horizontal-stepper *ngIf="showStepper">

您可以将showStep 或showStepper 的值更新为true 或false，具体取决于您是否要显示步进器。

注意：这也会删除内容。

如果您只想删除 mat-horizontal-stepper 标头并保留内容，则可以使用 CSS 来实现。

.mat-horizontal-stepper-header-container {
    display: none !important;
}