角度4＆材料步進器

Question

是否可以在 stepper內重置（或只是跳轉到第一步）？ 它沒有記錄在文檔中，但可以這樣做嗎？ 在文檔中指出，步進器是建立在「CDK步進器」（link？）上，但我找不到任何導致我實現目標的示例。

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

Answer 2

檢查如果這個stepper component可以解決您的問題。

Answer 3

It is possible to jump to a specific stepper. MatStepper exposes a public property selectedIndex which specifies the current selected step index. It can be set. The index starts at 0.

在模板：

添加ID到您的步進例如#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'; 

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

Stackblitz demo

Answer 4

我嘗試提供的解決方案，他們幾乎爲我工作，我得到了以下錯誤：

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

這個小調整工作對我來說（使用材料2公測11）：

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