使用输出更改mat-stepper的标签索引

Question

我正在使用mat-stepper进行查看，并且每个mat-step中都有一个具有形式的组件。 当我提交表单时，我使用@output传递了一个事件并在父组件中接收，并使用stepper.next（）增加了mat-stepper的索引，但是当我尝试首先在组件中提交表单时，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)
    }
  }

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