如何使用 angular material 步进器和 angular 6 激活 selectedIndex 步骤之前的所有步骤

Question

我使用了 angular material 步进器，我需要激活之前的所有步骤，直到 selectedIndex 步骤进入 angular 6. 我已经尝试使用线性步进器，但我只得到selectedIndex 的活动步骤不适用于所有以前的索引。示例我有 5 个步骤，我 select 第 3 个步骤，我只得到第 3 个步骤，剩下的第 1 个和第 2 个步骤是不活动的，我需要激活第一、二、三步

angular 6 , angular material 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>

在 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

Answer 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>

如何使用 angular material 步进器和 angular 6 激活 selectedIndex 步骤之前的所有步骤

how to make active previous all steps of selectedIndex step using angular material stepper and angular 6

angular-material

angular

angular6

angular-material-6

在html

在 ts