Angular Material Stepper 中的已完成属性似乎没有按预期工作

Question

这是此行为的堆栈闪电战。我希望看到的是，当单击“完成”按钮时，第一步已完成，因此图标将更改为“10”。但是，没有任何变化，即使移动到第二步，图标也是“创建”。我是否误解了该completed属性应该如何工作，或者 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>