Angular material matstepper取消选择所有步骤

Question

在Mat-stepper中，在初始渲染时，我不希望选择first step。我希望所有步骤都是未选中(未填充)的步骤。

Answer 1

我查看了angular文档，但找不到任何与如何实现这一点相关的内容。我脑海中出现的唯一一件事是，您可以修改当前步骤的索引来选择/取消选择步骤。我提出的解决方案是将MatStepper ViewChild的selected索引属性设置为-1。

  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectedIndex = -1;
  }

它之所以有效，是因为在mat-stepper的实现中，所有步骤都被预先缓存，并基于与步骤数组的索引匹配的selcectedIndex，正如我们所知，它从0开始：

"selectedIndex === i"

Reference

示例：https://stackblitz.com/edit/angular-mat-stepper-program-n7beys

更新：顶层方法并不是很成功。当您单击一个步骤时，它会抛出一个错误，因为您正在访问索引为-1的步骤数组。

您还可以创建自己的自定义实现并将其基于cdkStepper -> https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper

如果你不能做到这一点，你可以检查teradata中的stepper。我知道他们提供了一个扩展的api。https://teradata.github.io/covalent/#/components/steps/overview