Angular 4 & Material Stepper

Можно ли reset (или просто перейти к первому шагу) внутри stepper? Это не документировано в документах, но возможно ли это сделать? В документах указано, что шагомер построен на "CDK Stepper" (ссылка?), Но я не могу найти примеров, которые приводят я к своей цели.

Ответ 1

Хорошо, похоже, я нашел решение (но он не указан нигде в API).

Добавьте ссылку на шагомер, затем добавьте ViewChild с ссылкой в ваш компонент typescript.
Создайте метод изменения индекса шага.

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

Ответ 2

Можно прыгнуть на конкретный степпер. MatStepper выставляет публичное свойство selectedIndex, которое указывает текущий выбранный пошаговый указатель. Это может быть установлено. Индекс начинается с 0.

В вашем шаблоне:

Добавьте идентификатор к вашему степперу, например #stepper. Затем добавьте кнопку в свой шаг и передайте идентификатор степпера в функцию на (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>

.. а в вашей машинописи:

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

exported YourOwnComponent {

  constructor() {}

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

Stackblitz demo

Ответ 3

Проверьте, если этот шаговый компонент решает вашу проблему.

Ответ 4

В шаблоне html укажите ваш степпер с помощью #stepper

<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-horizontal-stepper>

и в вашем машинописном файле объявите степпер

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

после этого вы можете установить шаговый шаг с его выбранным

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

Ответ 5

Я попробовал предоставленные решения, и они почти сработали для меня, я получил следующую ошибку:

TypeError: Cannot read property 'toArray' of undefined
    at MdVerticalStepper.webpackJsonp.../../../cdk/esm5/stepper.es5.js.CdkStepper._anyControlsInvalid (stepper.es5.js:351)

Эта небольшая корректировка работала для меня (используя материал 2 beta 11):

changeStep(index: number) {
  console.log(this.stepper);
  this.stepper._selectedIndex = 2;
}