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

Question

我用react.js和材料UI制作了一个步进样本项目。链接是https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

我试图使用Angular和材料制作相同的样本，但我无法实现与反应相同的功能。谁能帮我这个？

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

我想在这个样本中实现的目标： -

• 步进标题： - 在反应样本中我只启用当前标题并在选择时，我启用添加项目按钮。
• 图标，我无法删除编辑图标。

谢谢您的帮助。

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