Angular 材料步进器下一步显示创建而不是 1答案

【问题标题】：Angular material stepper next step showing create instead of 1Angular 材料步进器下一步显示创建而不是 1
【发布时间】：2018-07-06 16:17:16
【问题描述】：

我正在使用步进器，我想禁用下一步，直到所有填充都被填充，所以我将线性设置为 true html文件

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

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

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

【问题讨论】：

【解决方案1】：

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

或者将"create"这个词替换为你需要添加google材料字体图标链接的钢笔图标：

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

【讨论】：

【解决方案2】：

在 mat-horizontal-stepper 中添加 #stepper

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

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

@ViewChild('stepper') stepper: MatHorizontalStepper;

最后，在 afterViewInit 中进行

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

【讨论】：

它应该只是@ViewChild('stepper') stepper: MatHorizontalStepper;，它就像一个魅力。
来自另一个帖子 (stackoverflow.com/questions/60876479/…)：我这样做了（更多类型完成）：this.stepper._getIndicatorType = (): string => STEP_STATE.NUMBER;

【解决方案3】：

可能您使用另一个字体系列代替默认值。您可以通过修复使用步进器的页面中字体系列的“材料图标”来解决此问题。

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

【讨论】：