如何将第二步设置为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和视图初始化后,设置selectedIndex的stepper为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演示.

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

使用selectedIndexmat-h​​orizo​​ntal-stepper 中的属性作为默认值

前任：

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

注意：索引以 0（零）开始