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

尝试这样的事情：

示例演示

样式.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>

Answer 2

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

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

要不就

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

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

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