使用 angular 将编号更改为双步进器

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

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

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

或

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

但它会降低大型菜单的性能，因为每次 angular 执行 "dirty check" 时都需要计算表达式（如果您不使用 onPush 策略）。

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

Answer 2

尝试这样的事情：

EXAMPLE DEMO

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

使用 angular 将编号更改为双步进器

Change numbering into double stepper with angular

angular-material

angular

stepper