Stepper 是否为步骤更改提供事件处理？答案

【问题标题】：Does Stepper provide an event handling for step changes?Stepper 是否为步骤更改提供事件处理？
【发布时间】：2021-05-03 09:44:53
【问题描述】：

我在我的项目中使用 mat-stepper，在侧面 mat-stepper 中我有 mat-Datatable。在每一步我都必须隐藏和显示不同的列，所以我想向每一步发送一些数据更改这可能吗？

我在考虑 stepper 是否为此目的提供某种事件处理。

在此先感谢您。

已编辑

stepper.ts

  onSelectionChange(e: any){
    this.selectedIndex = e.selectedIndex;
  }

stepper.html

<mat-horizontal-stepper (selectionChange)="onSelectionChange($event)"  labelPosition="bottom"  #stepper>
<mat-step>
  <ng-template matStepLabel>DataTable</ng-template>
  <app-data-table [selectedIndex]="selectedIndex"></app-data-table>
</mat-step>
</mat-horizontal-stepper>

datatable.ts

  @Input() selectedIndex: any;
  show: boolean = false;
  if (this.selectedIndex != 3) 
   {this.show = true;}

datatable.html

    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef [hidden]="!show">Delete</th>
      <td mat-cell *matCellDef="let element" [hidden]="!show">
          <button><mat-icon>delete</mat-icon></button>
      </td>
   </ng-container>

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用 : selectionChange() 事件（当所选步骤发生更改时发出的事件。）使用示例代码：

<mat-horizontal-stepper [linear]="isLinear" #stepper 
(selectionChange)="onStepChange($event)">


onStepChange(event: any): void {
    //use event.selectedIndex to know which step your user in.
}

您可以在这里阅读更多内容：https://material.angular.io/components/stepper/overview

【讨论】：

我尝试过这种方式，但有时它只是没有检查 selectedIndex。例如在下面的代码中。它没有进入 if。当它在第 2 步时。if (this.selectedIndex != 3) { this.show = true; }
你能粘贴完整的代码吗？你正在使用 this.selectedIndex 而你需要使用 event.selectedIndex
我使用服务解决了这个问题。谢谢