как сделать активными все предыдущие шаги шага selectedIndex с помощью angular material stepper и angular 6

У меня есть степпер материала angular, и мне нужно активировать все предыдущие шаги до шага selectedIndex в angular 6. Я уже пробовал использовать линейный шаговый двигатель, но получаю только активный шаг для selectedIndex не для всех предыдущих индексов. Пример: у меня 5 шагов, и я выберите 3-й, я получаю только 3-й шаг из активных, оставшиеся 1-й и 2-й шаги неактивны, мне нужно активировать 1-й, 2-й, 3-й шаги

угловой 6, угловой материал 6

в html

<div class="col-lg-7" *ngIf="!process">
                           <mat-horizontal-stepper [linear]="isLinear" 
 [selectedIndex]="currentStep" #stepper>
                             <ng-container *ngFor="let step of steps">
                                   <ng-template matStepperIcon="home">
                                       <mat-icon>home</mat-icon>
                                     </ng-template>
                               <mat-step  [editable]="isEditable">
                                 <ng-template matStepLabel>{{step}}</ng- 
    template>
                               </mat-step>
                             </ng-container>
                           </mat-horizontal-stepper>
                         </div>  

in ts

```
isLinear = true;
      process: Boolean;
      steps = [ "Ordered", "Packed", "Shipped", 'Transit', "Delivered" ];
      this.process = true;
        setTimeout(() => {
          this.currentStep = 2;
          this.process = false;
        }, 1500);

I expected first three steps are active mode but i got only 3rd step in active mode

person sm kumar    schedule 06.07.2019    source источник
comment
под активацией вы имеете в виду, что: вы можете перейти к этому шагу? или цвет синий (что означает активность) ??   -  person Akber Iqbal    schedule 08.07.2019
comment
да, синий цвет, который я имею в виду активный   -  person sm kumar    schedule 08.07.2019
comment
это легко сделать на Angular8, material8 ... можете ли вы воссоздать stackblitz для конкретной версии Angular и материала, которую вы используете?   -  person Akber Iqbal    schedule 08.07.2019
comment
возможно любое в угловом 6   -  person sm kumar    schedule 08.07.2019
comment
если вы не дадите мне конкретные версии, которые вы используете ... это очень открытый вопрос   -  person Akber Iqbal    schedule 08.07.2019
comment
угловой материал 6.4.7, угловой cli 6.2.9   -  person sm kumar    schedule 08.07.2019


Ответы (1)


Вы можете отметить шаги, предшествующие выбранному, как выполненные:

<mat-horizontal-stepper [linear]="isLinear" [selectedIndex]="currentStep" #stepper>
    <ng-container *ngFor="let step of steps; index as i">
        <ng-template matStepperIcon="home">
            <mat-icon>home</mat-icon>
        </ng-template>
        <mat-step #matStep [editable]="isEditable" 
                [completed]="matStep.interacted || i < currentStep">
            <ng-template matStepLabel>{{step}}</ng-template>
        </mat-step>
    </ng-container>
</mat-horizontal-stepper>
person G. Tranter    schedule 08.07.2019
comment
matStepperIcon работает в версиях angular 6 и выше? - person sm kumar; 09.07.2019