Angular Material Stepper：如何将所有步骤设置为“不活动”？

Question

我有一个角度组件，其视图如下：

<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，但是一旦您单击该步骤，就会触发错误：

  

ERROR TypeError：无法设置未定义的属性'interacted'

这是逻辑：

...

  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);
  }

...