Angular7+Material：点击复选框动态切换步进器步骤的问题求助

问题根源 #

当通过*ngIf动态移除步进器步骤时，Material步进器的内部步骤数组会发生变化，但当前的selectedIndex可能仍指向已被移除的步骤索引，导致「下一步」按钮无法找到有效跳转目标。而点击「返回」后，selectedIndex回到了有效步骤范围内，步进器重新计算跳转逻辑，因此能正常进入确认步骤。

解决方案 #

方案1：手动同步selectedIndex并强制更新步进器状态

在切换流程时，主动调整selectedIndex到有效范围，并触发步进器状态更新：

1. 组件类中添加步进器引用和切换逻辑：

import { Component, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

@Component({
  // 组件元数据
})
export class YourModalComponent {
  @ViewChild('stepper') stepper: MatStepper;
  isShortFlow = false; // 绑定复选框的变量

  onFlowToggle() {
    // 短流程下，确保selectedIndex不超过显示的步骤数
    if (this.isShortFlow) {
      // 假设短流程显示步骤1、2、5（确认步骤），若当前索引>=3，直接切换到步骤2
      if (this.stepper.selectedIndex >= 3) {
        this.stepper.selectedIndex = 2;
      }
    } else {
      // 恢复长流程时，可根据需要调整索引（比如回到之前的步骤）
    }
    // 强制步进器更新内部状态
    this.stepper._stateChanged();
  }
}

2. 模板中绑定复选框和步进器：

<mat-stepper #stepper>
  <!-- 步骤1 -->
  <mat-step>
    <ng-template matStepLabel>步骤1</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 步骤2 -->
  <mat-step>
    <ng-template matStepLabel>步骤2</ng-template>
    <mat-checkbox [(ngModel)]="isShortFlow" (change)="onFlowToggle()">简化流程</mat-checkbox>
    <!-- 其他内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 步骤3（长流程显示） -->
  <mat-step *ngIf="!isShortFlow">
    <ng-template matStepLabel>步骤3</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 步骤4（长流程显示） -->
  <mat-step *ngIf="!isShortFlow">
    <ng-template matStepLabel>步骤4</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 确认步骤 -->
  <mat-step>
    <ng-template matStepLabel>确认信息</ng-template>
    <!-- 确认内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button>提交</button>
  </mat-step>
</mat-stepper>

方案2：用completed/editable控制步骤跳过（推荐）

避免动态移除步骤，而是通过标记步骤为已完成且不可编辑，让步进器自动跳过这些步骤，状态更稳定：

1. 组件类中添加控制属性：

export class YourModalComponent {
  isShortFlow = false;

  // 短流程下，步骤3直接标记为完成且不可编辑
  get step3Config() {
    return {
      completed: this.isShortFlow,
      editable: !this.isShortFlow
    };
  }

  // 短流程下，步骤4直接标记为完成且不可编辑
  get step4Config() {
    return {
      completed: this.isShortFlow,
      editable: !this.isShortFlow
    };
  }
}

2. 模板中绑定属性：

<mat-stepper>
  <!-- 步骤1、2、确认步骤结构不变 -->

  <!-- 步骤3 -->
  <mat-step [completed]="step3Config.completed" [editable]="step3Config.editable">
    <ng-template matStepLabel>步骤3</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 步骤4 -->
  <mat-step [completed]="step4Config.completed" [editable]="step4Config.editable">
    <ng-template matStepLabel>步骤4</ng-template>
    <!-- 步骤内容 -->
    <button mat-button matStepperPrevious>返回</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
</mat-stepper>

这种方式下，步进器的步骤数组始终保持完整，仅通过属性控制是否需要用户操作，彻底避免了动态移除步骤导致的状态不同步问题。

内容的提问来源于stack exchange，提问作者Felipe Parra Soto