Angular Material Mat Horizontal Stepper не выбирает правильный шаг при переходе с помощью следующей кнопки

Question

У меня есть горизонтальный степпер с матом, которым мне нужно управлять с помощью кнопок «Далее» и «Назад», с шагами, сгенерированными с помощью ngFor. Я создал переменную stepIndex и привязал ее к входу selectedIndex, кнопка Next увеличила бы это значение, а Back уменьшила бы его.

Завершенные шаги должны быть отмечены галочкой, это сделано с использованием ввода [completed] mat step, который верен для любого шага с индексом меньше, чем stepIndex, и шаговый двигатель должен быть линейным, чтобы не позволять выбирать будущий шаг.

Вот ссылка на stackblitz :

https://stackblitz.com/edit/angular-guhqtk

Я столкнулся с проблемой на следующем шаге, который правильно увеличивает stepIndex, но не отображает выбранный шаг (выбранный шаг в розовом, завершенные шаги в фиолетовом с галочкой), выбранный шаг остается на первом. Я могу выбрать предыдущий шаг или успешно нажать назад, но когда я снова пытаюсь сделать следующий, шаг остается застрявшим.

Например, нажатие следующего в первый раз ничего не меняет, в то время как ожидаемое поведение будет иметь второй шаг выбран и отображается розовым цветом, нажатие второй раз показывает, что второй шаг завершен, как и ожидалось, но выбранный шаг должен быть третьим шагом, пока он остается на первом.

Я не понимаю происхождение этой проблемы, любая помощь будет оценена.

Answer 1

Вы превышаете количество шагов при нажатии следующей кнопки и всегда увеличиваете stepIndex

 onNextStep(){
    if(this.stepIndex < this.steps.length-1){
       ++this.stepIndex;
    }
 }

https://stackblitz.com/edit/angular-guhqtk-jazd1u

Для выполненных шагов

[completed]="stepper.selectedIndex < stepper?.steps?.length"

примечание: в настоящее время запускается ошибка изменения выражения