从 Angular Material Design Stepper 获取步骤索引答案

【问题标题】：Get step index from Angular Material Design Stepper从 Angular Material Design Stepper 获取步骤索引
【发布时间】：2019-06-27 13:48:38
【问题描述】：

我正在尝试在使用 Angular Material Design 步进器的组件中获取选定的步骤。

问题是我试图通过使用 selectedIndex 属性来获取它，但现在当我尝试获取它时总是得到“1”

        <button mat-button mat-flat-button color="primary"
                (click)="onSave(stepper)">
          SAVE
        </button>

onSave(stepper: MatStepper)
  {
    debugger;
    let workflowStepName = this.declarationWorkflowHelper.getWorkflowName(stepper.selectedIndex);

    this.screenSave.next(workflowStepName);
  }

我期望步进器的选定索引，但我总是检索“1”

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

尝试将stepControl 显式设置为您的matStep。例如。 firstFormGroup，secondFormGroup：

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <!-- The code is omitted for the brevity -->
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <!-- The code is omitted for the brevity --> 
     <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

【讨论】：