從 Angular Material Design Stepper 獲取步驟索引

Question

我正在嘗試在使用 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”

Answer 1

嘗試將stepControl顯式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>