angular - 如何完成 Material Stepper Step，并继续下一步？

Question

我有一个 Angular Material Stepper，有 3 个步骤。

这些步骤被标记为 complete=false，因此您在完成之前无法进入下一步。

但是，如果我将一个步骤标记为完成， stepper.next 似乎会进入不确定状态。

示例：https ://stackblitz.com/edit/angular-oyeqzm?file=src%2Fapp%2Fstepper-states-example.ts

就像步进器没有“刷新”以了解步骤的完成状态。

有什么想法吗？

Answer 1

要从 Angular 中的 ts 文件访问 Stepper，然后将 2 按钮 Next 和 Previous 与功能一起放置。

nextStep(stepper: MatStepper) {
    setTimeout(() => {
      stepper.next();
    }, 0);
  }

  preivousStep(stepper: MatStepper) {
    setTimeout(() => {
      stepper.previous();
    }, 0);
  }

MatStepper 由 angular material 提供，如果出现错误，则将其 Module 导入模块文件中。

您需要设置 Settimeout，因为如果 *ngFor 在 DOM 中应用，那么您需要单击 2 次才能进入下一步。

我应用这个，然后它的工作完美。

希望你们都喜欢，

> 谢谢！！！

Answer 2

我不是专家，但似乎带有 *ngFor 循环的 DOM 刷新速度不够快，this.stepper.next();无法生效。

如果我将它包装在 SetTimeout 中，上面的 stackblitz 就可以工作：

        setTimeout(() => {
            this.stepper.next()
        }, 1);

我将此作为答案，但如果有人知道更好的方法，我会欢迎