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方法传递的事件对象中获取 new 索引，如下所示：

<强> HTML：

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

<强> TS：

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

这可以解决您的问题。