Angular Material selectionChanged返回上一步而不是当前

Question

我有一个由两列组成的页面。一个包含垂直步进器，另一个包含每个步骤的说明。我想根据当前步骤来更新此描述，因此请收听selectionChange-Event。问题是，当我查找selectedIndex时，得到的是先前选择的步骤，而不是我现在所在的步骤。

HTML：

<div class="row"> <div class="col-7 stepperColumn"> <mat-vertical-stepper (selectionChange)="onStepChange(eventCreationStepper)" #eventCreationStepper> <!--some steps--> </mat-vertical-stepper> </div> <div class="col-5"> <!--some descriptions--> </div> </div>

JS：

public onStepChange(stepper: MatStepper) { console.log(stepper.selectedIndex); }

Answer 1

乍一看，这似乎是奇怪的行为，但是经过深思熟虑，我意识到这是因为在更改步骤之前，您正在通过模板ref，因此，到达您方法的对象仍指向上一步。

看来解决方案是从方法传递的事件对象中获取新索引selectionChange，如下所示：

HTML：

<mat-vertical-stepper (selectionChange)="onStepChange($event)">

TS：

public onStepChange(event: any): void {
  console.log(event.selectedIndex);
}

这应该可以解决您的问题。