时间戳

首页 > 解决方案 > 将编号更改为带角度的双步进

angular - 将编号更改为带角度的双步进

问题描述

我试图将步进器打印到步进器中：

<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

请问这个怎么做？

标签： angularangular-materialstepper

解决方案

尝试这样的事情：

示例演示

样式.css：

.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
}

HTML：

<mat-vertical-stepper>
    <mat-step *ngFor="let step of Steps; let i= index;" [label]="step.name">
        <mat-vertical-stepper>
            <mat-step *ngFor="let substep of step.subnames; let j = index" label="{{i+1}}.{{j+1}}">
            </mat-step>
        </mat-vertical-stepper>
    </mat-step>
</mat-vertical-stepper>

推荐阅读