材料步进器 - 使用表单组数组时步骤消失

Question

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

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

场景：

1. 填写表格
2. 点击添加一项
3. 填写表格
4. 按删除一项
5. 看到台阶消失了

Example on Stackblitz

问题：为什么会这样？

Answer 1

我认为这是由于this.selectedIndex。因为拼接后没有带有 selectedIndex 的项。所以你可以改变 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);
  }