Как определить начало и конец mat-stepper в Angular?

на данный момент у меня стоит коврик-степпер вертикальный. он заполняет шаги, используя * ngFor.

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

Итак, я хочу определить начало и конец этого шагового двигателя, чтобы использовать его в качестве переменной. в настоящее время я использую переменную как счетчик. Я увеличиваю и уменьшаю его, чтобы определить шаг мата. но я хочу хорошее решение что то. Так есть ли кто-нибудь, кто может мне помочь в этом вопросе?


typescript angular mat-stepper
person wrx95    schedule 01.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Mat-stepper генерирует событие selectionChange при каждом изменении шага. Вы можете подписаться на эти изменения внутри своего файла машинописного текста и соответствующим образом обработать ... что-то вроде этого.

//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;
      });
  }
}
person murphworm    schedule 01.04.2020