时间戳

首页 > 解决方案 > 使用输出更改 mat-stepper 的选项卡索引

angular - 使用输出更改 mat-stepper 的选项卡索引

问题描述

我正在使用 mat-stepper 作为我的视图，并且在每个 mat-step 中都有一个带有表单的组件。当我的表单被提交时，我正在使用 @output 传递一个事件并在父组件中接收并使用 stepper.next() 增加 mat-stepper 的索引但是当我尝试在组件内部提交表单时，步进器无法更改其选项卡。在第二次尝试时，它正在工作并且选项卡正在更改。HTML 文件

<mat-horizontal-stepper linear #stepper>
    <mat-step [completed]="false" label="Create Product Storage Location" [stepControl]="locationForm">
        <app-add-location (notify)='getLocationForm($event)'></app-add-location>
    </mat-step>
    <mat-step [completed]="false" label="Add Single or Multiple Products" [stepControl]="productForm">
        <app-add-product (notify)='getProductForm($event)'></app-add-product>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        <p>your product is created successfully !!</p>
        <div>
        </div>
    </mat-step>
</mat-horizontal-stepper>

打字稿功能

@ViewChild('stepper') myStepper: MatStepper;
getLocationForm(formGroup: FormGroup): void {
    this.locationForm = formGroup;
    if(this.locationForm.status == "VALID"){
      this.myStepper.next()
      console.log('selected index is after', this.myStepper.selectedIndex)
    }
  }

我想更改标签索引并显示下一个处于活动状态的标签。

标签： angulartypescriptangular-material

解决方案

推荐阅读