如何在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或showStepper的值更新为true或false。

  

注意：这也会删除内容。

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

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