Angular Material 步进器 'Paginate'

Question

我的步进器中有很多步骤，所以我想把它分成两部分，即

当用户进入向导时，步进器标题仅显示 1--2--3--4，然后，当第 4 步完成后，用户进入第 5 步，标题显示 5--6--7-- 8，依此类推进行下一步。

你知道有什么方法可以做到这一点吗？

提前致谢。

编辑:

我尝试使用 *ngIf隐藏/取消隐藏步骤，但它确实从步进器阵列中删除了这些步骤，因此在步骤隐藏时输入的信息会丢失。

这是我的 *ngIf 方法:https://stackblitz.com/edit/angular-material2-beta-kknvx9

另外，尝试了类似的方法 [hidden] ，但它根本不起作用。

Answer 1

问题在于mat-step更改为 mat-step-header当它呈现时，它上面的任何自定义类或属性都将消失。

以下代码有效，但很困惑。最好的解决方案是找到另一个有你需要的向导组件，或者在 GitHub 上向 Material 开发者提交一个请求，在 mat-step 上添加一个隐藏标志。 .

StackBlitz

类(class):

export class AppComponent implements OnInit, AfterViewInit{
  private ngVersion: string = VERSION.full;

  MAX_STEP = 7;

  @ViewChild('stepper') private myStepper: MatStepper;
  step: number = 0;
  page:number = 0;

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.rerender();
  }

  goBack() {
    if (this.step > 0) {
      this.step--;
      this.myStepper.previous();
    }
    this.page = this.step > 3 ? 1 : 0;
    this.rerender();
  }

  goForward() {
    if(this.step < this.MAX_STEP) {
      this.step++;
      this.myStepper.next();
    }
    this.page = this.step > 3 ? 1 : 0;
    this.rerender() 
  }

  private rerender() {

    let headers = document.getElementsByTagName('mat-step-header');
    let lines = document.getElementsByClassName('mat-stepper-horizontal-line');

    for (let h of headers) {
      if (this.page === 0) {
        if (Number.parseInt(h.getAttribute('ng-reflect-index')) > 3) {
          h.style.display = 'none';
        }
        else {
          h.style.display = 'flex';
        }
      }
      else if (this.page === 1) {
        if (Number.parseInt(h.getAttribute('ng-reflect-index')) < 4) {
          h.style.display = 'none';
        }
        else {
          h.style.display = 'flex';
        }
      }
    }

    for (let i = 0; i < lines.length; i++) {
      if (this.page === 0) {
        if (i > 2) {
          lines[i].style.display = 'none';
        }
        else {
          lines[i].style.display = 'block';
        }
      }
      else if (this.page === 1) {
        if (i < 4) {
          lines[i].style.display = 'none';
        }
        else {
          lines[i].style.display = 'block';
        }
      }
    }

  }

}

看法:

<div class="solution">

  <!--------------------------------------------------------------------------------------->
  <mat-horizontal-stepper #stepper>
    <mat-step>
      Step 1
    </mat-step>
    <mat-step>
      Step 2
      <input matInput placeholder="Address" required>
    </mat-step>
    <mat-step>
      Step 3
    </mat-step>
    <mat-step>
      Step 4
    </mat-step>
    <mat-step>
      Step 5
    </mat-step>
    <mat-step>
      Step 6
      <input matInput placeholder="Address" required>
    </mat-step>
    <mat-step>
      Step 7
    </mat-step>
    <mat-step>
      Step 8
    </mat-step>
    <!-- one option -->
  </mat-horizontal-stepper>

  <!-- second option -->
  <div>
    <button (click)="goBack()" type="button" [hidden]="step === 0">Back</button>
    <button (click)="goForward()" type="button" [hidden]="step === MAX_STEP">Next</button>
  </div>
  <!--------------------------------------------------------------------------------------->
  Step: {{step}}
  <br>
  Page: {{page}}

</div>