Angular中Mat-stepper表格内下一步按钮需双击问题求助

我尝试将表格行作为Mat-stepper的下一步触发项，但表格内的mat-button按钮需要双击才能触发步骤切换并进入下一步，代码如下：

<mat-stepper linear #stepper>
  <mat-step [completed]="firstStep">
    <ng-template matStepLabel>Pick a folder</ng-template>
    <table mat-table [dataSource]="folders">
      <ng-container matColumnDef="folder">
        <mat-header-cell *matHeaderCellDef>Folders.</mat-header-cell>
        <mat-cell *matCellDef="let folder">
          <button mat-button matStepperNext (click)="pickCorrectFolder(folder)">
            {{ folder }}
          </button></mat-cell
        >
      </ng-container>
      <mat-header-row
        *matHeaderRowDef="folderCol"
      ></mat-header-row>
      <mat-row *matRowDef="let myRowData; columns: folderCol"> </mat-row>
    </table>
  </mat-step>
</mat-stepper>

原因分析 #

• 你的Mat-Stepper开启了linear模式，要求当前步骤的completed属性为true才能切换到下一步。
• 第一次点击按钮时，matStepperNext指令会先尝试触发步骤切换，但此时pickCorrectFolder方法还未执行，firstStep仍为false，步骤切换失败；第二次点击时，firstStep已经被设置为true，matStepperNext才能成功触发切换，所以需要双击。

解决方法 #

方案1：手动控制步骤切换（最可靠）

移除按钮上的matStepperNext指令，在业务方法内先完成状态更新，再调用stepper的next()方法：

1. 组件类中获取stepper实例：

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

// ...

@ViewChild('stepper') stepper: MatStepper;

pickCorrectFolder(folder: any) {
  // 执行你的业务逻辑，比如标记当前步骤为已完成
  this.firstStep = true;
  // 手动触发步骤切换
  this.stepper.next();
}

2. 修改模板中的按钮：

<button mat-button (click)="pickCorrectFolder(folder)">
  {{ folder }}
</button>

方案2：确保状态同步更新

如果希望保留matStepperNext，可以确保firstStep的更新能被Angular的变更检测及时捕获，比如使用**Angular信号（Signal）**替代普通属性：

import { signal } from '@angular/core';

// 用signal定义状态
firstStep = signal(false);

pickCorrectFolder(folder: any) {
  // 更新信号值
  this.firstStep.set(true);
}

模板中修改completed的绑定：

<mat-step [completed]="firstStep()">

这种方式能确保状态更新立即生效，让matStepperNext在第一次点击时就能识别到步骤已完成。

内容的提问来源于stack exchange，提问作者jason