角4和材料步进器-Java 学习之路

是否可以在stepper内重置（或只是跳转到第一步）？文档中没有记录，但是可以这样做吗？在文档中声明步进器是 Build 在"CDK Stepper"（link？）上的，但我找不到任何能够让我实现目标的例子 .

3 回答

可以跳转到特定的步进器 . MatStepper公开一个公共属性selectedIndex，它指定当前选定的步骤索引 . 它可以设置 . 索引从0开始 .

In your template:

在步进器中添加ID，例如 #stepper . 然后在步骤中添加一个按钮，并在 (click) 上的函数中传递步进器ID，如下所示：

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

.. and in your typescript:

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

exported YourOwnComponent {

  constructor() {}

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

Stackblitz demo

回复于 2024-04-30T02:07:27+08:00

我尝试了提供的解决方案，他们几乎为我工作，我得到以下错误：

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

这个小调整对我有用（使用Material 2 beta 11）：

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

回复于 2024-04-30T02:07:27+08:00

-1

好吧，似乎我找到了一个解决方案（但它没有在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;
    }
}

回复于 2024-04-30T02:07:27+08:00

角4和材料步进器

3 回答

相关问题