如何使用角度材料步进器创建进度向导

Question

我正在尝试使用角度材料步进器创建一个进度向导。我得到的 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
}

如果状态为 true，则它应显示为绿色;如果为 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 中传递状态值。 在您的垫步中，添加已完成和状态

[状态]="状态"> 这样，当状态为真时，mat-step 就完成了，也可以在 component.ts 中操作状态，以便在状态为真时完成

参考 ： 如何证明最后一个垫步在垫步进器中是完整的？