如何在 Angular 中检测 mat-stepper 的开始和结束？答案

【问题标题】：How to detect mat-stepper start and end in Angular?如何在 Angular 中检测 mat-stepper 的开始和结束？
【发布时间】：2020-04-01 15:46:43
【问题描述】：

目前，我有一个垂直垫子步进器。它使用 *ngFor 填充这些步骤。

<mat-step [stepControl]="firstFormGroup" *ngFor="let stream of selectedStreamList; let indexOfelement = index;">

所以，我想检测这个步进器的开始和这个步进器的结束以用作变量。目前，我正在使用变量作为计数器。我增加和减少它来检测垫步。但我想要一个好的解决方案。那么有没有人可以帮助我解决这个问题？

【问题讨论】：

标签： angular typescript mat-stepper

【解决方案1】：

每当步长改变时，mat-stepper 都会发出一个 selectionChange 事件。您可以在 typescript 文件中订阅这些更改并进行相应处理……可能是这样的。

//app.component.ts

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { MatStepper } from "@angular/material/stepper";
import { StepperSelectionEvent } from "@angular/cdk/stepper";
import { pluck } from "rxjs/operators";

@Component({
  selector: "app-root",
  template: `
    <mat-vertical-stepper #stepper>
      <mat-step
        *ngFor="let stream of selectedStreamList; let indexOfelement = index"
      ></mat-step>
    </mat-vertical-stepper>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild("stepper", { static: false }) private stepper: MatStepper;

  selectedStreamList = [1, 2, 3, 4];
  isAtStart: boolean;
  isAtEnd: boolean;

  constructor() {}

  ngAfterViewInit() {
    this.stepper.selectionChange
      .pipe(pluck("selectedIndex"))
      .subscribe((res: number) => {
        this.isAtStart = res === 0;
        this.isAtEnd = res === this.selectedStreamList.length - 1;
      });
  }
}

【讨论】：