Angular材料步进器下一步显示“create”而不是“1”。

Question

我正在开发步进控制程序，希望在所有填充项都填好之前禁用下一步操作，因此我在HTML文件中将linear设置为true。

Translated:

我在开发步进控制器，希望在所有的填写项目都被完成之前禁用下一步骤，所以我在 HTML 文件中将 "linear" 设为 true。

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

它运行良好，但每当我进入下一步时，“1”就变成了“cre” 检查后，我得到

我在代码中没有使用create，它来自mat-icon。

- Shiv Gaurav

---

尝试在mat-step上设置[completed] =“false”，以仅获取数字。 - Fateme Fazli

只需查看整个mat-stepper mat-step，问题就会得到解决。可能是与错误的封闭标签相关联。 - Dimitri Leite

Answer 1

你可以在mat-step上设置[completed]="false"，这样你将只看到数字而不是图标。

或者，如果要用钢笔图标替换单词"create"，则需要添加Google Material字体图标链接：

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

- Fateme Fazli

---

@ShivGaurav 您好，shiv.material 应该添加一个属性来显示数字而不仅仅是图标。 - Fateme Fazli

[completed]="false" 不允许转到下一步 :( - Umesh Patadiya

使用 [completed]="false" 是不正确的。根据 Angular 文档：“将 completed 属性传递给每个步骤，直到它变为 true，用户才能继续。” - Francesco

谷歌材料字体图标链接对我有效，谢谢。 - Romil Patel

谢谢，在试了很久的胡闹之后终于有了结果。 <3 - Sujeewa K. Abeysinghe

Answer 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';
}

- Saad Qamar

---

它应该只是 @ViewChild('stepper') stepper: MatHorizontalStepper;，并且它能够完美地工作。 - Urke

从另一篇帖子中（https://dev59.com/Erroa4cB1Zd3GeqPbgKu）：我做了这个（更完整的类型）： this.stepper._getIndicatorType = (): string => STEP_STATE.NUMBER; - Russ

Answer 3

也许您使用的是默认字体族之外的另一种字体族。 您可以通过为使用步进器的页面修复“Material Icon”字体族来解决此问题。

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

- Rouhollah Torshizi