如何將第二步設置爲Material-2步進器中的主動步驟？

Question

<mat-vertical-stepper> 
<mat-step label="Agreement Preparation"> 
    <p>Agreement preparion is intiated by our side </p> 
</mat-step> 
<mat-step label="Ready for Biometric" selected active> 
    <p>Agreement preparion is intiated by our side </p> 

</mat-step> 
<mat-step label="Document in Submission"> 
    <p>Agreement preparion is intiated by our side </p> 

</mat-step> 

我試着設置主動和選擇，但它不工作。

Answer 1

添加對步進器的引用，例如#stepper和視圖初始化後，設置stepper的selectedIndex爲1

在你的模板：

<mat-vertical-stepper #stepper> 
     <mat-step label="Agreement Preparation"> 
      <p>Agreement preparion is intiated by our side </p> 
     </mat-step> 
     <mat-step label="Ready for Biometric"> 
      <p>Agreement preparion is intiated by our side </p> 
     </mat-step> 
     <mat-step label="Document in Submission"> 
      <p>Agreement preparion is intiated by our side </p> 
     </mat-step> 
    </mat-vertical-stepper> 

......在你的打字稿：

import { ViewChild, AfterViewInit } from '@angular/core'; 
import { MatStepper } from '@angular/material'; 

Component({ 
    ..... 
}) 
export class ComponentClass implements AfterViewInit { 
    @ViewChild('stepper') stepper: MatStepper; 

    ngAfterViewInit() { 
     this.stepper.selectedIndex = 1; 
    } 
} 

鏈接到StackBlitz demo。

Answer 2

對於任何人仍在查看這個，這是我沒有實施AfterViewInit。

<div *ngIf="!processing"> 
    <mat-vertical-stepper linear [selectedIndex]="currentStep"> 
     <mat-step label="Step 1">Step 1</mat-step> 
     <mat-step label="Step 2">Step 2</mat-step> 
     <mat-step label="Step 3">Step 3</mat-step> 
     <mat-step label="Step 4">Step 4</mat-step> 
    </mat-vertical-stepper> 
</div> 

我的TS文件：

ngOnInit() { 
    this.processing = true; 
    setTimeout(() => { 
     this.currentStep = 2; 
     this.processing = false; 
    }, 1500); 
} 

這setTimeout()用於模擬API調用需要一些時間。這可以幫助您僅在確定知道要設置活動的索引時才顯示步進器。