角材料步进器下一步显示create而不是1

Question

我正在研究步进器，我想禁用下一步，直到所有填充物都应填充为止，以便在 html文件

<mat-horizontal-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="firstFormGroup">
          <form [formGroup]="firstFormGroup">

它工作正常，但是每当我进行下一步时，“ 1”就变成“ cre” 在检查我得到

我没有在用户代码中创建任何来自mat-icon的用户

Answer 1

您可以在[completed]="false"上设置mat-step，并且只有数字而不是图标。

或用钢笔图标替换"create"一词，您需要添加google material字体图标链接：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

Answer 2

在水平卧式步进器中添加 #stepper

<mat-horizontal-stepper [linear]="true" #stepper>
....
</mat-horizontal-stepper>

然后在.ts文件中获取该步进器

@ViewChild('stepper') stepper: MatHorizontalStepper;

最后，在afterViewInit中完成

ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}

Answer 3

可能您使用另一个字体系列，而不是默认字体。 您可以在使用步进器的页面中使用字体家族的修复程序“材料图标”来解决此问题。

:host /deep/ .material-icons {
  font-family: 'Material Icons' !important;
}