Angular 材料墊水平步進器在使用下一步按鈕前進時未選擇正確的步進

Question

我有一個墊子水平步進器，我需要使用“下一步”和“后退”按鈕進行控制，並使用 ngFor 生成步驟。 我創建了一個變量“stepIndex”並將其綁定到“selectedIndex”輸入，Next 按鈕會增加這個值，Back 會減少它。

完成的步驟應該用一個檢查標記，這是使用 mat step 的 [completed] 輸入完成的，這對於任何索引小於 stepIndex 的步驟都是正確的，並且步進器應該是線性的，不允許選擇未來的步驟。

這是stackblitz的鏈接：

https://stackblitz.com/edit/angular-guhqtk

我遇到了下一步的問題，即正確增加 stepIndex，但未將步驟顯示為被選中（所選步驟為粉紅色，已完成的步驟為紫色並帶有復選標記），所選步驟停留在第一個。 我可以 select 上一步，或者成功按回，但是當我再次嘗試下一步時，步驟卡住了。

例如，第一次按下下一步不會改變任何事情，而預期的行為是選擇第二步並顯示為粉紅色，第二次按下顯示第二步按預期完成，但選定的步驟應該是第三步當它停留在第一個時，邁出一步。

我不知道這個問題的根源，任何幫助將不勝感激。

Answer 1

按下下一個按鈕時，您超過了步數，並且總是增加 stepIndex

 onNextStep(){
    if(this.stepIndex < this.steps.length-1){
       ++this.stepIndex;
    }
 }

對於已完成的步驟

[completed]="stepper.selectedIndex < stepper?.steps?.length"

注意：它當前會觸發表達式更改錯誤