Angular Material Stepper: Как установить «неактивные» все шаги? - PullRequest
Новая
       41

Angular Material Stepper: Как установить «неактивные» все шаги?

1 голос
/ 21 июня 2019

У меня есть угловой компонент со следующим видом: 

<div class="stepper-container" *ngIf="steps">
  <mat-horizontal-stepper *ngIf="!isVertical" [selectedIndex]="stepIndex" (selectionChange)="selectionChange($event)" #stepper class="stepper" [style.width.%]="long">
    <mat-step *ngFor="let step of steps; let i = index">
      <ng-template matStepLabel>{{step}}  <mat-icon>check</mat-icon></ng-template>
    </mat-step>
  </mat-horizontal-stepper>
</div>

Я бы хотел, чтобы все мои шаги не были активными вместо первого (selectedIndex = 0).

Я попытался использовать selectedIndex = -1, но как только вы щелкнете по шагу, он вызовет ошибку:

ОШИБКА TypeError: Невозможно установить свойство 'взаимодействовал' с неопределенным

Это логика: 

...

  steps: string[];
  bpSub: Subscription;
  isVertical: boolean;
  verticalStepperBreakpoint = breakpoints.verticalStepperBreakpoint;

  @Input()
  set stepperSteps(value: string[]) {
    this.steps = value;
  }
  @Input() stepIndex: number;
  @Input() long: number;
  @Input() completed: boolean;
  @Output() selectedStepIndexChanged: EventEmitter<number> = new EventEmitter();

  constructor(private bpObserver: BreakpointObserver) {
  }

  ngOnInit() {
    this.bpSub = this.bpObserver
      .observe([`(max-width: ${this.verticalStepperBreakpoint}px)`])
      .subscribe((state: BreakpointState) => {
        this.setVerticalStepper(state.matches);
      });
  }

  ngOnDestroy() {
    if (this.bpSub) {
      this.bpSub.unsubscribe();
    }
  }

  selectionChange(e: StepperSelectionEvent) {
    this.selectedStepIndexChanged.emit(e.selectedIndex);
  }

...
...