Angular Material Stepper中已完成的属性似乎无法按预期工作 [英] Completed property in Angular Material Stepper doesn't seem to work as expected

问题描述

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

Here is a stackblitz of this behavior. What I expect to see is that when the Complete button is clicked, the first step is complete, so the icon would change to "10". However, there is no change, and even when moving to the second step, the icon is "create". Am I misunderstanding how the completed property is supposed to be working, or is there a bug in the Material code?

推荐答案

这里出错了:

图标为创建":

the icon is "create":

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

The stepper has a dependency on material icons. Adding material-icons to your project and the 'cre' icon is gone.

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

Also, the create / edit icon is normal behavior for a completed step. If you like the step to be marked as done you have to set completed=true and editable = false

另一个问题是使用let-index="index". V5文档中没有任何内容. (您的堆叠闪电使用的是V5).

Another issue is the use of let-index="index". There is nothing in the V5 docs on this. (And your stackblitz is using V5).

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

If you have the possibility to upgrade to V6, then it's possible to what you're asking. I've created a stackblitz for this behaviour.

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中已完成的属性似乎无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！