Угловой шагер Cdk, как определить, когда добавлен новый шаг

Question

У меня есть пользовательский степпер на основе Cdk, но он динамический.Так что это связано с FormArray.Когда элемент добавляется в formArray, мне нужно перенаправить на самый новый шаг.Кажется, что CdkStepper не вызывает никакого события для элемента, добавляемого в коллекцию шагов.

Я пытался подписаться на valueChange в FormArray, но он срабатывает до добавления нового шага.

Вот блик стека с настройкой.

Answer 1

CdkStepper имеет свойство _steps: QueryList<CdkStep>, которое имеет свойство changes: Observable<any> , которое выдает значения как новые шаги, добавленные в CdkStepper.

Однако, когдаиспользуется для свойства OnInit _steps, похоже, еще не заполнено.Таким образом, использование settimeout для ожидания следующего цикла обнаружения изменений для _steps для инициализации решает проблему.В вашем примере измените CustomStepperComponent следующим образом:

ngOnInit() {
  setTimeout(()=>{
    this._steps.changes.subscribe(x => {
      this.selectedIndex = x.length - 1;
    });
  });
}

вот мое рабочее демо

https://stackblitz.com/edit/angular-cdkstepper-formarray-jnftgb

btw, _steps свойство равно устарел в "@angular/material": "8.0.0"