从Angular Material Design Stepper获取步骤索引

时间:2019-06-27 13:48:38

标签: angular typescript angular-material

我试图在使用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”

1 个答案:

答案 0 :(得分:1)

尝试将stepControl明确设置为matStep。例如。 firstFormGroupsecondFormGroup

<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>