如何使用 angular 材料步進器創建進度向導

Question

我正在嘗試使用 angular 材料步進器創建進度向導。 我得到如下所示的 JSON 數據：

{
  "step":1,
  "info":"this is some order data",
  "status":true
},
 {
  "step":2,
   "info":"this is some order data",
  "status":true
},
 {
  "step":3,
  "info":"this is some order data",
  "status":false
}

如果狀態為真，則應顯示綠色； 如果它是假的，它應該顯示灰色以及我可以在此處顯示的一些信息。 步進器通常僅與 onlick 一起使用，但我需要它根據 JSON 狀態工作。 下面是我的代碼：

<mat-horizontal-stepper>

  <mat-step label="Step 1">
    Step 1 content
  </mat-step>

  <mat-step label="Step 2">
    Step 2 content
  </mat-step>

  <mat-step label="Step 3">
    You are now done.
  </mat-step>
  
</mat-horizontal-stepper>

https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw

Answer 1

在 mat-step 中傳遞狀態值。 在您的墊子步驟中，添加完成和 state

<mat-step [completed]="status" [state]="state"> 這樣當 status 為 true 時 mat-step 完成並且還可以在 component.ts 中操作 state 以便在 status 為 true 時完成

參考： 如何在 mat-stepper 中顯示最后一個 mat-step 已完成？