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

起初这似乎是一种奇怪的行为，但在考虑之后我意识到这是因为您在更改步骤之前通过模板引用，所以到达您的方法中的对象仍然指向前一个步。

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

HTML：

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

TS：

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

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