动态地将步骤添加到mat步进器并导航到它抛出超出界限的错误。

Question

我正在使用一个简单的mat步进器，其中的步骤是使用*ngFor从数组中生成的。

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

动态添加这些步骤很好--导航部分是一个问题，因为它导致了一个异常："Error: 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之前添加这个步骤，它就会运行得很好。