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

问题描述

这是一个stackblitz 这种行为.我希望看到的是，当单击完成"按钮时，第一步已完成，因此图标将更改为10".但是，没有任何变化，即使移动到第二步，图标也是创建".我是否误解了 completed 属性应该如何工作，或者 Material 代码中是否存在错误?

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?

推荐答案

这里有几个错误:

图标是创建":

步进器依赖于材质图标.将材质图标添加到您的项目中，'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 文档 中没有关于此的任何内容.(你的 stackblitz 使用的是 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屋！