javascript - 动态添加步骤到 mat-stepper 并导航到它会抛出越界错误

Question

我正在使用一个简单的 mat-stepper，其中步骤是使用*ngFor.

我想在渲染步进器后动态地向显示器添加一个步骤，然后立即以编程方式导航到它。

动态添加步骤可以正常工作 - 导航部分是问题，因为它会导致异常：“错误：cdkStepper：无法将超出范围的值分配给selectedIndex”，即使分配的索引应该在基于步骤的范围内传递给组件。

用于说明问题的简化示例（超时只是导致添加额外步骤的异步行为的占位符）。

steps = ['step1', 'step2'];
selectedIndex = 1;

ngOnInit() {
  setTimeout(() => {
    this.steps.push('step3');
    this.selectedIndex = 2;
  });
}

<mat-stepper [selectedIndex]="selectedIndex">
  <mat-step *ngFor="let step of steps">
    {{step}}
  </mat-step>
</mat-stepper>

关于我们如何解决这个问题的任何想法？

完整示例：https ://stackblitz.com/edit/angular-cdafd9?file=app%2Fstepper-overview-example.ts

Answer 1

似乎步进器需要一些初始化。如果您在 setTimeout 之前添加步骤，它就可以正常工作。