如何隐藏 Material 步进器的垫步之一而不将其从 DOM 中移除？

Question

如何从 mat-horizontal-stepper 中隐藏其中一个“mat-step”？
我已经设置了这个 css 属性:

display:none

但它不适用于“mat-step”。

我不想从 DOM 中删除那个元素，所以 *ngIf 在这里没用。

我看到他们在某处使用“

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

但这适用于整个 .我只想隐藏一个。

我也试过了

<mat-step style="display: none;"></mat-step>

没有成功。

我有如下情况：

<mat-horizontal-stepper>
    <mat-step></mat-step>
    <mat-step></mat-step> // I just want to hide this step
    <mat-step></mat-step>
    <mat-step></mat-step>
</mat-horizontal-stepper>

Answer 1

要到达特定的 mat-step，请使用 :nth-of-type() 选择器通过 css 到达该步骤。不需要 ::ng-deep。您可以将它放在组件的 css 中，也可以放在 styles.css:

中

.mat-step-header:nth-of-type(2){ //for example, to remove the second step
  display:none;
}

Demo

如何隐藏 Material 步进器的垫步之一而不将其从 DOM 中移除？

How to hide one of the mat-step of Material stepper without removing it from the DOM?

css

angular-material

angular

angular-material-stepper