如何完成一個 Material Stepper Step，並繼續下一步？

Question

我有一個有 3 個步驟的 Angular Material Stepper。

這些步驟被標記為 complete=false，因此在它們完成之前您無法進入下一步。

但是，如果我將一個步驟標記為完成， stepper.next 似乎會進入不確定狀態。

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

這就像步進器沒有“刷新”以了解步驟的完成狀態。

有什么想法嗎？

Answer 1

我不是專家，但似乎帶有 *ngFor 循環的 DOM 對於this.stepper.next();刷新速度不夠快this.stepper.next(); 生效。

如果我將其包裝在 SetTimeout 中，則上述 stackblitz 有效：

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

我把它作為答案，但如果有人知道更好的方法，我會歡迎

Answer 2

要從 Angular 中的 ts 文件訪問 Stepper，然后使用功能放置 2 個按鈕 Next 和 Previous 。

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

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

MatStepper 由角度材料提供，如果出現錯誤，則在模塊文件中導入其模塊。

您需要設置 Settimeout 因為如果 *ngFor 在 DOM 中應用，那么您需要單擊 2 次才能進入下一步。

我應用了這個，然后它完美地工作。

希望你們都喜歡，

> 謝謝！！！