时间戳

首页 > 解决方案 > 如何仅在 mat-stepper 上显示索引？

angular - 如何仅在 mat-stepper 上显示索引？

问题描述

mat-stepper如果步骤是 ，则现在显示一个edit或done材料图标completed。有没有办法不显示图标，而只显示索引？

标签： angularangular-material

解决方案

您可以使用一个 hack，添加stepControl将发挥作用。不确定这是否是正确的解决方案，但它对我有用。

尝试这个，

.component.html

<mat-step [stepControl]="doneFormGroup">
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
</mat-step>

.component.ts

export class StepperVerticalExample implements OnInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  doneFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
    this.doneFormGroup = this._formBuilder.group({
      doneControl: ['',Validators.required]
    })
  }
}

希望这有帮助！！..快乐编码！

推荐阅读