webentwicklung-frage-antwort-db.com.de

Angular 4 & Material Stepper

Ist es möglich, innerhalb eines Stepper zurückzusetzen (oder einfach zum ersten Schritt zu springen)? Es ist nicht in den Dokumenten dokumentiert, aber ist es möglich, dies zu tun? In den Dokumenten wird angegeben, dass der Stepper auf "CDK Stepper" ( link ?) Basiert, aber ich kann keine Beispiele finden, die mich zu meinem Ziel führen.

angularangular-materialangular-material2
21
Ben jamin

Anscheinend habe ich eine Lösung gefunden (die jedoch nirgends in der API angegeben ist).

  1. Fügen Sie einen Verweis auf den Stepper hinzu, und fügen Sie dann ViewChild mit dem Verweis in Ihrer TypeScript-Komponentendatei hinzu.
  2. Erstellen Sie eine Methode, um den Index des Steppers zu ändern.

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;
    }
}
39
Ben jamin

Es ist möglich, zu einem bestimmten Schritt zu springen. MatStepper macht eine öffentliche Eigenschaft verfügbar selectedIndex, der den aktuell ausgewählten Schrittindex angibt. Es kann eingestellt werden. Der Index beginnt bei 0.

In Ihrer Vorlage:

Fügen Sie Ihrem Stepper eine ID hinzu, z. #stepper. Fügen Sie dann in Ihrem Schritt eine Schaltfläche hinzu und übergeben Sie die Stepper-ID in einer Funktion an (click) wie folgt:

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

.. und in Ihrem TypeScript: 

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

exported YourOwnComponent {

  constructor() {}

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

Stackblitz-Demo

14
Faisal