如何在我的 mat-stepper 中隐藏 mat-stepper 标头？

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或 的值更新为或 ，具体取决于您是否要显示步进器。showSteppertruefalse

注意：这也会删除内容。

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

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