html - Material 设计 - 步进器如何删除/禁用步骤？

Question

我正在使用 Material - Angular2 Stepper ，我还有其他步骤要添加/启用，具体取决于用户在第一步中选择的内容。

我尝试了以下方法:
- 将附加表格加载到数组中，
- 然后在模板中使用 *ngFor

循环遍历它

<mat-vertical-stepper linear>
  <mat-step [stepControl]="firstForm" label="First">
    <!-- Some form controls -->
  </mat-step>
  <mat-step *ngFor="let f of additionalForms" [stepControl]="f.form"
      [label]="f.label">
    <!-- Additional Steps -->
  </mat-step>
</mat-vertical-stepper>

这对于添加新步骤很有效，问题是我无法删除它们。如果用户碰巧返回第一个表单并取消选中某些内容，则不需要这些额外的步骤。

所以尝试类似的东西:this.additionalForms = [] 不会删除这些步骤。 (直到您单击其中一个“已删除”步骤，然后它会抛出错误:无法读取未定义的“可编辑”属性，然后它们才会被可视化删除)

我也尝试过 ChangeDetectorRef.detectChanges()
并尝试包装到 NgZone.run()

但没有区别

有什么解决办法吗？

Answer 1

所以我设法解决了这个问题:
https://github.com/angular/material2/issues/7700#issuecomment-336138411

1) 引用步进器:

<mat-vertical-stepper #stepper></mat-vertical-stepper>

2) 然后，在 .ts 端:

import { ViewChild } from '@angular/core';
import { MatVerticalStepper } from '@angular/material';

@ViewChild('stepper') stepper: MatVerticalStepper;

clearAdditionalForms(): void {
  this.inventoryForms = [];
  this.stepper._stateChanged(); // <- this : Marks the component to be change detected.
}

这是在调用一个私有(private)方法，这可能是一个非常糟糕的主意，所以如果您有更好/正确的解决方案，请告诉我，我会更改答案