angular-material - Angular Material Stepper 中的已完成属性似乎无法按预期工作

Question

这是这种行为的堆叠闪电战。我期望看到的是，当单击完成按钮时，第一步完成，因此图标将变为“10”。但是，并没有什么变化，甚至当移动到第二步时，图标也是“创建”。我是否误解了该completed属性应该如何工作，或者材料代码中是否存在错误？

标签： angular-material

Answer 1

这里有几个问题：

图标是“创建”：

步进器依赖于材质图标。将材料图标添加到您的项目中，'cre'图标就消失了。

此外，创建/编辑图标是已完成步骤的正常行为。如果您希望将步骤标记为完成，则必须设置completed=true和editable = false

另一个问题是使用let-index="index". V5 文档中对此没有任何内容。（而且您的 stackblitz 正在使用 V5）。

如果您有可能升级到 V6，那么就有可能满足您的要求。我为这种行为创建了一个堆栈闪电战。

组件.ts

import { Component, ViewChild } from '@angular/core';
import { MatHorizontalStepper } from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;

  complete() {
      this.stepper.selected.completed = true;
      this.stepper.selected.editable = false;
      this.stepper.next();
  }
}

组件.html

<mat-horizontal-stepper linear id="stepper">

  <ng-template matStepperIcon="done" let-index="index">
    {{(index+1) * 10}}
  </ng-template>

  <mat-step label="Step 1">
    <p>Step 1</p>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

  <mat-step label="Step 2">
    <h3>Step 2</h3>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

  <mat-step label="Step 3">
    <h3>Step 3</h3>
    <button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
  </mat-step>

</mat-horizontal-stepper>