Question

这是此行为的stackblitz。我希望看到的是，单击“完成”按钮时，第一步已完成，因此图标将变为“ 10”。但是，没有任何变化，即使移至第二步，该图标仍为“创建”。我是不是误解了completed属性应该如何工作，还是Material代码中存在错误？

Answer 1

这里的事情错了：

图标为“创建”：

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

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

另一个问题是使用let-index="index"。 V5 docs中没有任何内容。（您的堆叠闪电使用的是V5）。

如果您可以升级到V6，则可以根据您的要求进行升级。我为此行为创建了一个stackblitz。

component.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();
  }
}

component.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>

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

1 个答案: