材料设计 \- 步进器如何删除/禁用步骤？

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 = [] 不会删除这些步骤。 （直到您单击其中一个“已删除”步骤，然后它会抛出一个错误： Cannot read property 'editable' of undefined ，只有这样，它们才会在视觉上被删除）

我也试过做 ChangeDetectorRef.detectChanges()

并尝试包装成 NgZone.run()

但没有区别

有什么解决办法吗？

原文由 user7552 发布，翻译遵循 CC BY-SA 4.0 许可协议

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.
}

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

原文由 user7552 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

稍微有角度一点的方式，避免私有方法的方式，是在步骤使用的表单控件上记录你需要做什么。例如，假设我们有一个步骤：

   <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
       <!-- your controls here -->
    </form>
  </mat-step>

然后定义您的表单组：

 this.secondFormGroup = this._formBuilder.group({
  check: [false, Validators.requiredTrue]
});

我们现在已经定义了一个伪元素“check”，它将被步骤验证。假设我们用点击功能设置了一些东西：

   doClick(item) {
     this.secondFormGroup.controls.check.setValue(item === 'thevalue');
  }

Angular material 现在将完成剩下的工作，直到 item === thevalue 之前，您将无法通过该步骤。

原文由 PeterS 发布，翻译遵循 CC BY-SA 3.0 许可协议