Material Design - 步进条如何移除/禁用步骤？

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

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

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材料将会处理剩下的内容，直到item === thevalue，您将无法继续到下一步。

- PeterS

Answer 3

在每个步骤中添加*ngIf。

<mat-step *ngIf="*expression*"></mat-step>

- Nikita Tsygankov

Answer 4

此外，如果您不想返回之前的结果，您可以使用stepper的editable属性，如下所示。

<mat-vertical-stepper linear>
  <mat-step [stepControl]="firstForm" label="First" [editable]="false">
    <!-- 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>

基于https://material.angular.io/components/stepper/overview#editable-step。

- ahmeticat

Answer 5

角材料 8.2.3

最好是[禁用]选项，但令人难以置信的是他们没有添加！因此，我尝试了所有选项，并最终找到了一种清晰的方法来自定义步骤标题：

当然，要显示/隐藏步骤，只需使用*ngIf（还有什么？）。

基于用户单击/存储状态动态禁用步骤的：

效果很好：无悬停背景效果，光标正常，单个步骤标题不可点击，仍具有完整的颜色：不是不透明的。

steps: Array<HTMLElement> = [];
subscriptions: Array<Subscription> = [];

ngAfterViewInit() {
    // Needs continuous monitoring
    this.subscriptions.push(
        this.<observable>.pipe(
            tap((data: Data) => {
                // IMPORTANT: If you have an *ngIf on the steps,
                // you have to sync the references of the HTML elements
                this.syncHTMLSteps();
                this.updateStepState(1, false); // Always disabled
                if (data.isXXX) {
                    this.updateStepState(5, false);
                } else if (data.isYYY) {
                    this.updateStepState(2, false);
                    this.updateStepState(5, true);
                }
            })
        ).subscribe());
}

ngOnDestroy() {
    this.subscriptions.forEach((subscription) => {
        if (subscription) {
            subscription.unsubscribe();
        }
    });
}

/**
 * Reads from the Dom the list of HTML elements for the steps.
 */
private syncHTMLSteps() {
    this.steps = [];
    let increment = 1;
    let stepper: HTMLElement = document.querySelector('.mat-stepper-vertical');
    if (!stepper) {
        increment = 2; // 2, because Angular adds 2 elements for each horizontal step
        stepper = document.querySelector('.mat-horizontal-stepper-header-container');
    }
    for (let i = 0; i < stepper.children.length; i += increment) {
        this.steps.push(stepper.children[i] as HTMLElement);
    }

}

/**
 * Enable/Disable the click on the step header.
 *
 * @param step The step number (starts from 1)
 * @param enabled The new state
 */
private updateStepState(step: number, enabled: boolean) {
    // If you prefer to start using step 0, remove -1 here
    this.steps[step - 1].style.pointerEvents = enabled ? '' : 'none';
}

- Davideas