如何在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; 
        }
    }

链接到。

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调用。这有助于您仅在确定要将哪个索引设置为活动状态时才显示步进器。

Answer 3

默认情况下，在mat-stepper selectedIndex中使用属性步进器

例如：

<mat-horizontal-stepper [linear]="isLinear" #stepper selectedIndex="2">
  <mat-label></mat-label>
</mat-horizontal-stepper>

注意:从0(零)开始索引