Измените нумерацию на двойной шаговый с угловым - PullRequest
Новая
       34

Измените нумерацию на двойной шаговый с угловым

0 голосов
/ 24 августа 2018

Я попытался напечатать шаговый шагер в шаговом режиме: 

<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
2
  • 2,1
  • 2,2

Как это сделать, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 24 августа 2018

Попробуйте что-то вроде этого:

ПРИМЕР ДЕМО

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>
0 голосов
/ 24 августа 2018

Вы можете использовать синтаксис javascript внутри выражения bind 

<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 для компонента меню или предварительно рассчитайте полную метку подменю перед использованием.

...