Material stepper - 使用表单组数组时步骤消失

Question

我正在使用 @angular/material 的步进器，我有一些我无法完全解释的行为。我正在使用一个数组，其中放置了一个表单组。这个数组是我的 ngFor 来源，我将项目传递给步骤。当我从数组中删除一项时，mat-step's 消失了。但是列表中仍然充满了项目。

顺便说一句，使用 trackyby 没有帮助。唯一有帮助的是 select 在更改状态之前执行不同的步骤。 （见第 51 行）

场景：

填写表格
点击添加一项
填写表格
按删除一项
看到台阶消失

Example on Stackblitz

问题：为什么会这样？

Answer 1

我认为这是由于 this.selectedIndex。因为拼接后没有带有selectedIndex的item。所以你可以改变 removeone 功能如下。

  public removeone() {
    console.error('remove: ', this.selectedIndex)
    /** REMOVE THE LINE BELOW TO LET THE STEPS STAY ON THE SCREEN */
    // this.stepper._steps.first.select();
    var  selected = this.selectedIndex;
    this.stepper._stateChanged();
    this.change.detectChanges();
    this.stepper.previous();
    this._list.splice(selected, 1);
  }

Material stepper - 使用表单组数组时步骤消失

Material stepper - Steps disappear when using a array of formgroup

angular-material2

angular