css - 如何隐藏 Material stepper 的 mat-step 之一而不将其从 DOM 中删除？

Question

如何从 mat-h​​orizo​​ntal-stepper 中隐藏“mat-step”之一？
我已经设置了这个 css 属性：

display:none

但它不适用于“垫步”。

我不想从 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

要到达特定的垫子步骤，请使用: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;
}

演示