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的{{1}}设置为1。

在您的模板中

stepper

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

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

链接到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调用。这有助于您仅在确定知道要设置活动的索引时才显示步进器。

Answer 3

默认使用mat-horizontal-stepper中的属性selectedIndex

例如：

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

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

如何将第二步设置为Material-2步进器中的活动步骤？

3 个答案: