角材料步进器删除数字

Posted 2023-05-07

【中文标题】角材料步进器删除数字

【英文标题】：Angular material stepper remove numbers

【发布时间】：2020-10-09 03:28:56

【问题描述】：

如何从 Angular 材料步进器中删除数字？

我不希望用图标替换它们，我希望有一个空圆圈。

编辑：我正在使用角度 9

【参考方案1】：

在 mat-step 中，插入这些模板，从而替换默认的数字。

<mat-horizontal-stepper [linear]="true" #stepper>
  <!-- STEPS -->
  <mat-step label="First Step" state="your-state-name-here-1">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Second Step" state="your-state-name-here-2">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Third Step" state="your-state-name-here-3">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <!-- STEPS -->

  <!-- Replace icon mat-step -->
  <ng-template matStepperIcon="your-state-name-here-1">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-2">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-3">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <!-- Replace icon mat-step -->
</mat-horizontal-stepper>

观察： 为了使用自定义步进状态，您必须将 displayDefaultIndicatorType 选项添加到全局默认步进器选项中，可以通过在应用程序的根模块或特定子模块中为 STEPPER_GLOBAL_OPTIONS 提供值来指定该选项。

@NgModule(
  providers: [
    
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue:  displayDefaultIndicatorType: false 
    
  ]
)

Official documentation

【讨论】：

我无法让这个解决方案发挥作用。盲目地模仿你的代码并没有改变任何东西（数字仍然显示），我非常不确定如何处理你的最后一行代码

@MatthieuRaynauddeFitte，对不起，我忘了提到你需要放入模块的这个提供者，我更新了答案，你能检查它是否工作正常吗？

抱歉耽搁了这么久。不，它不起作用，我不明白为什么。我可能有一个我不理解或看不到的互动

更准确地说：我确实可以工作，但前提是我选择了元素。如果未选中，它会显示一个白色的“完成”文本，而不是什么都没有

ok 找到了完整的解决方案，其中包含大量文档阅读、摆弄和您的答案，您非常接近答案。无论出于何种原因，material 都绝对希望显示图标或数字，但您可以使用 <ng-template matStepperIcon="your-state-name-here"><mat-icon>icon-name-here</mat-icon><ng-template> 对其进行重载。我遇到的另一个问题是我没有任何图标导入，所以我抱怨的“完成”文本实际上是它试图显示的图标的名称。