angular - Angular Cdk步进器，如何检测何时添加了新步骤

Question

我有一个基于 Cdk 的自定义步进器，但它是动态的。所以它绑定到一个FormArray。当一个项目被添加到 formArray 时，我需要重定向到最新的步骤。CdkStepper 似乎不会触发将项目添加到步骤集合的任何事件。

我尝试订阅 FormArray 上的 valueChange，但它在添加新步骤之前触发。

score 3 · Accepted Answer

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

这是我的工作演示

顺便说一句，_steps属性已被弃用"@angular/material": "8.0.0"

1 回答 1