Angular Mat Stepper仅启用主动导航和完整导航

Question

我用react.js和材质UI创建了一个步进器示例项目。链接为https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

我试图使用Angular和材质制作相同的样本，但是我无法实现与react相同的功能。有人可以帮我吗？

角度工作链接：- https://stackblitz.com/edit/stepper-dynamic-gpwp1x?file=src%2Fapp%2Fapp.component.html

在此示例中我要实现的目标：-

• Stepper标头：-在react示例中，我仅启用当前标头，并在选择时启用添加项目按钮。
• 图标，我无法删除编辑图标。

感谢您的帮助。

Answer 1

您可以执行以下操作来完成此操作。

---

禁用添加按钮：

将#verticalStepper的模板引用添加到步进器

<mat-vertical-stepper #verticalStepper

将#addButton的模板引用添加到您的按钮步骤

<mat-step #addButton>

然后将按钮步与选定的步进器进行比较，如果它们不匹配，则禁用按钮。

<button mat-flat-button [disabled]="verticalStepper.selected != addButton" (click)="addItem()">  

---

使用[completed]控制该步骤的完成时间：

将#step的模板引用添加到步骤*ngFor循环中，然后如果step.completed将true传递给[completed]输入。

<mat-step #step *ngFor="let step of newSteps; let i = index" [completed]="step.completed">

然后在您的(change)事件集中将step.completed = true

(change)="changeStep($event, i); step.completed = true">

---

覆盖编辑图标

添加以下内容，将编辑图标替换为步骤索引。

<ng-template matStepperIcon="edit" let-index="index">
   {{index + 1}}
 </ng-template>

---

Stackblitz

https://stackblitz.com/edit/stepper-dynamic-qxh5qf?embed=1&file=src/app/app.component.html