angular - 如何在 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 并在 View 初始化后，将 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>

...并在您的 typescript 中:

    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 .