在mat-vertical-stepper中使用mat-step的completed属性时,上一步无法打开

时间:2019-04-26 12:24:41

标签: angular

我正在使用具有多个步骤的垂直垫板步进器。第一步完成后,第二步将打开,直到最后一步。上一步有问题。 我无法使用上一步,因为我使用的是“完成”属性。

<mat-vertical-stepper #stepper linear (selectionChange)="stepChanged($event, stepper);">
    <mat-step completed="false">
        <ng-template matStepLabel>
            <div fxLayout="row" fxLayoutAlign="start center">
                <div fxFlex="80">
                    Step 1
                </div>
                <div fxFlex="20">
                    <button mat-stroked-button class="pull-right"
                            (click)="goToNext(stepper);" *ngIf="activeIndex === 0">
                        Next
                    </button>
                </div>
            </div>
        </ng-template>
        <component-test1></component-test1>
    </mat-step>
    <mat-step completed="false">
        <ng-template matStepLabel>
            <div fxLayout="row" fxLayoutAlign="start center">
                <div fxFlex="80">
                    Step 2
                </div>
                <div fxFlex="20">
                    <button mat-stroked-button class="pull-right" *ngIf="activeIndex === 1" (click)="goToNext(stepper);">
                        Next
                    </button>
                </div>
            </div>
        </ng-template>
        <component-test2></component-test2>
    </mat-step>
    <mat-step completed="false">
        <ng-template matStepLabel>
            <div fxLayout="row" fxLayoutAlign="start center">
                <div fxFlex="80">
                    Step 3
                </div>
                <div fxFlex="20">
                    <button mat-stroked-button class="pull-right" *ngIf="activeIndex === 2" (click)="goToNext(stepper);">
                        Next
                    </button>
                </div>
            </div>
        </ng-template>
        <component-test3></component-test3>
    </mat-step>
</mat-vertical-stepper>

0 个答案:

没有答案