Question

我试图将步进打印为步进：

<mat-vertical-stepper>
        <mat-step *ngFor="let step of Steps" [label]="step.name">
          <mat-vertical-stepper>
            <mat-step *ngFor="let substep of step.subnames" [label]="substep.subname">
            </mat-step>
          </mat-vertical-stepper>
          </mat-step>
    </mat-vertical-stepper>

它可以工作，但我想更改符号：

更改

1

1

2



2

1

2

进入

1

1.1

1.2



2

2.1

2.2

请怎么做？

Answer 1

尝试这样的事情：

EXAMPLE DEMO

style.css：

public class Continent {

    private static HashSet<Continent> globalContinents = new HashSet();
    final private String continent_name;

    Continent(String continent_name){
        this.continent_name = continent_name;
        Continent.globalContinents.add(this);
    }
}

HTML：

.mat-vertical-stepper-header .mat-step-icon, .mat-vertical-stepper-header .mat-step-icon-not-touched {
  font-size: 0px;
    margin-left: 10px;
    background-color: black;
    height: 5px;
    width: 5px;
}
.mat-vertical-stepper-header .mat-step-icon, .mat-vertical-stepper-header .mat-step-icon-touched {
  font-size: 0px;
    margin-left: 10px;
    background-color: black;
    height: 5px;
    width: 5px;
}

mat-step-header[ng-reflect-selected="true"] .mat-step-icon{ 
  font-size: 12px;
  align-self: center;
  color: white;
  height: 20px;
  width: 20px;
}
mat-step-header[ng-reflect-selected="false"] .mat-step-icon .mat-icon{ 
 display: none
}

Answer 2

您可以在绑定表达式中使用javascript语法

<mat-step *ngFor="let substep of step.subnames" [label]="[step.name,substep.subname].join('.')">
</mat-step>

或者只是

[label]="step.name + '.' + substep.subname"

但这会降低大型菜单的性能，因为每次进行“脏检查”（如果不使用onPush策略）时，都需要计算表达式。

因此请考虑为菜单组件添加changeDetection: ChangeDetectionStrategy.OnPush，或在使用前预先计算完整的子菜单标签。

将编号更改为带有角

2 个答案: