Angular материал matstepper, чтобы отменить выбор всех шагов

Question

В Mat-stepper при начальном рендеринге я не хочу, чтобы был выбран первый шаг. Я хочу, чтобы все шаги были невыбранными (незаполненными).

Answer 1

Я проверил документацию angular и не смог найти ничего, связанного с тем, как этого добиться. Единственное, что мне пришло в голову, это то, что вы можете изменить, чтобы выбрать / отменить выбор шагов, это индекс текущего шага. Решение, которое я предлагаю, состоит в том, чтобы установить для выбранного свойства индекса MatStepper ViewChild значение -1. ​​

  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectedIndex = -1;
  }

. Это работает, потому что в реализации mat-stepper все шаги пропущены и основаны на selcectedIndex соответствует индексу массива шагов и, как мы знаем, начинается с 0:

"selectedIndex === i"

Ссылка

Пример: https://stackblitz.com/edit/angular-mat-stepper-program-n7beys

Обновление: Топ подход не совсем подходит. Когда вы нажимаете на шаг, он выдает ошибку, потому что вы обращаетесь к массиву шагов с индексом -1. Просматривая исходный код, я могу предложить другой подход, заключающийся в расширении вертикального или горизонтального шагового мата и предоставлении различных функциональных возможностей, когда вы шагаете и предоставляете -1. ​​

Вы также можете создать свою собственную реализацию на основе cdkStepper. -> https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper

И если вам не удается это сделать, вы можете проверить степпер из teradata. Я знаю, что они предоставляют расширенный API. https://teradata.github.io/covalent/# / компоненты / шаги / Обзор