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

【问题标题】：How to hide one of the mat-step of Material stepper without removing it from the DOM?如何隐藏 Material stepper 的 mat-step 之一而不将其从 DOM 中删除？
【发布时间】：2020-09-08 16:32:34
【问题描述】：

如何从 mat-horizontal-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>

【问题讨论】：

标签： css angular angular-material angular-material-stepper

【解决方案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;
}

Demo

【讨论】：