Angular 4和Material Stepper

Question

在stepper内部重置（或跳转到第一步）是否可能？ 文档中没有记录，但是有可能吗？ 文档中指出，该步进器是建立在“CDK Stepper”上的（link？），但我找不到任何示例可以达到我的目标。

- Ben jamin

---

@Edric，为什么你一直在删除 angular-material2 标签？\o/ - FAISAL

@Faisal，我在想 [tag:angular-material] 和 [tag:angular-material2] 之间有什么区别吗？ - Edric

没有IMO，但大多数用户使用“angular-material2”标签发布问题。我认为我们应该将此标签创建为“angular-material”的同义词。一旦我在该标签中获得足够的分数，我将提出这个建议。 - FAISAL

@Faisal 实际上，这个问题已经被问过两次了。https://meta.stackoverflow.com/questions/349630/yet-more-angular-tag-madness-this-time-about-angular-material 和 https://meta.stackoverflow.com/questions/346111/synonyms-angular2-material-and-angular-material2 - Edric

Answer 1

好的，看起来我找到了一个解决方案（但在API中没有说明）。

1. 添加对步进器的引用，然后在您的组件typescript文件中添加ViewChild并引用它。
2. 创建一个改变步进器索引的方法。

HTML:

<mat-horizontal-stepper [linear]="true" #stepper>
    <!-- Content here -->
</mat-horizontal-stepper>

TS:

import { Component, ViewChild } from '@angular/core';
@Component({
    // ...
})
export class AppComponent {
    @ViewChild('stepper') stepper;

    /**
     * Changes the step to the index specified
     * @param {number} index The index of the step
     */
    changeStep(index: number) {
        this.stepper.selectedIndex = index;
    }
}

- Ben jamin

---

这似乎太好了，以至于让人难以置信。但是在使用时出现了错误：TypeError: Cannot read property 'toArray' of undefined at MdVerticalStepper.webpackJsonp.../../../cdk/esm5/stepper.es5.js.CdkStepper._anyControlsInvalid (stepper.es5.js:351) 有人知道为什么吗？ - Deniss M.

你可以使用 this.stepper.reset() 代替。请参阅 https://material.angular.io/components/stepper/api 上的 MatStepper 文档。 - Bernhard Fürst

this.stepper.selectedIndex 第一次不会被更新。您需要调用两次才能移动到下一个步骤。您知道吗？@Benjamin - candidJ

Answer 2

可以跳转到特定的步骤。 MatStepper 公开了一个 selectedIndex 属性，它指定了当前选择的步骤索引。它可以被设置。索引从0开始。

在你的模板中：

在你的 stepper 上添加一个 id，例如：#stepper。然后在你的步骤中添加一个按钮，并将 stepper 的 id 传递给 (click) 函数，如下所示：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <!-- Your other steps here -->
    <mat-step [stepControl]="secondFormGroup">
        <!-- Content in the step -->
        <div>
            <!-- Other actions here -->                 
            <button mat-button (click)="resetStepper(stepper)">Reset</button>
        </div>
    </mat-step>
    <!-- More steps here -->
</mat-horizontal-stepper>

..并在你的TypeScript中：

import { MatStepper } from '@angular/material';

exported YourOwnComponent {

  constructor() {}

  resetStepper(stepper: MatStepper){
     stepper.selectedIndex = 0;
  }
}

Stackblitz演示

- FAISAL

---

43分钟晚了 :) 不过还是谢谢，拥有一个像你这样的工作演示来展示解决方案总是很好的。 - Ben jamin

好的，“重置”似乎只部分起作用，如果您想重置表单，它会清除值，但表单仍然无效。 我在这里fork了您的演示以展示演示（https://stackblitz.com/edit/angular-material2-beta-2upkqd?file=app/app.component.ts） - Ben jamin

即使表单重置后，仍然不确定为什么会发生这种情况 \o/ - FAISAL

似乎是一个bug，我也想通过重新加载当前视图来解决这个问题，但这似乎也有问题... - Ben jamin

@ Faisal，兄弟你能今天帮帮我吗？我已经尝试解决了，但因为我是 Angular 的新手，我需要有人的帮助才能完成。 - Zhu

Answer 3

在HTML模板中，使用#stepper引用您的步进器。

<mat-horizontal-stepper #stepper>
</mat-horizontal-stepper>

在您的TypeScript文件中声明步进器。

@ViewChild("stepper", { static: false }) stepper: MatStepper;

然后，您可以使用其selectedIndex属性设置步进器的步骤

 this.stepper.selectedIndex = 0; //0 is the index of the first step

- De Bonheur