Angular 使用输出更改mat步进机的制表符索引

我正在使用mat stepper进行查看，在每个mat step中都有一个具有表单的组件。 当我的表单被提交时，我在父组件中使用@output and receiving传递一个事件，并使用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>

---

我想更改选项卡索引，并显示下一个要激活的选项卡。

这一部分不太清楚：“但它现在第一次递增，保持不变，但第二次运行良好”。还有，你能为此创建一个stackblitz吗？我已经编辑了问题@GCSDCIs

this.myStepper.next（）

在你第一次提交表单时被触发？@GCSDC yess函数被调用，但在.next（）之后还是第一次被调用。它选择的索引是0。明白了！如果你能创建一个stackblitz，让我知道，我会尽力帮助你解决这个问题。

@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)
    }
  }