好的,看起来我找到了一个解决方案(但在API中没有说明)。
ViewChild
并引用它。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;
}
}
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ürstthis.stepper.selectedIndex
第一次不会被更新。您需要调用两次才能移动到下一个步骤。您知道吗?@Benjamin - candidJ可以跳转到特定的步骤。
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;
}
}
<mat-horizontal-stepper #stepper>
</mat-horizontal-stepper>
@ViewChild("stepper", { static: false }) stepper: MatStepper;
然后,您可以使用其selectedIndex属性设置步进器的步骤
this.stepper.selectedIndex = 0; //0 is the index of the first step
angular-material2
标签?\o/ - FAISAL