web-dev-qa-db-ja.com

Material-2ステッパーで2番目のステップをアクティブステップとして設定する方法

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

アクティブにして選択してみましたが、うまくいきません。

angularangular-materialangular-material2
7
Aranganathan

ステッパーへの参照を追加します。 #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>

...そしてあなたの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 へのリンク。

12
Faisal

まだこれを見ている人のために、これは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呼び出しをシミュレートするために使用されます。これにより、どのインデックスをアクティブに設定するかが確実にわかっている場合にのみ、ステッパーを表示できます。

7
Altus