带有 selectedIndex 设置 matStepperNext/matStepperPrevious 的角步进器不起作用答案

【问题标题】：Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working带有 selectedIndex 设置 matStepperNext/matStepperPrevious 的角步进器不起作用
【发布时间】：2019-02-08 02:09:30
【问题描述】：

我使用 matStepper，当我将 selectedIndex 设置为 3 时，我无法使用下一个和上一个导航。我可以单击水平步进器中的 (1)，然后像往常一样使用下一个/上一个。所有表格均有效，单击 (1) 后，我可以使用 1-7 中的下一个进行导航。

注意我有 this.selectedIndex = 3;硬编码

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see https://stackoverflow.com/questions/48498966/angular-material-stepper-component-for-each-step
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 ? this.component7.form : null;
  }
}

问题在 stackblitz 中重现

<mat-horizontal-stepper linear #stepper [selectedIndex]="1">

https://stackblitz.com/edit/angular-syml71?file=app/create-profile.component.html

【问题讨论】：

问题是因为 [linear]="true"。当您将此设置为 false 时，您的代码将正常工作。
但是我不能使用 prev next 验证.. 你有关于如何解决这个问题的建议
你的 stackblitz 演示有什么问题？ @RicardoSaracino
下一个按钮不起作用

标签： angular angular-material angular6 angular-material-stepper

【解决方案1】：

快速破解：

HTML：

<mat-vertical-stepper [linear]="true" #stepper>

TS：

 @ViewChild('stepper')
  stepper: MatStepper;
 
 nextClick(): void {
    this.stepper.linear = false;
    this.stepper.selectedIndex = ...;
    setTimeout(() => {
       this.stepper.linear = true;
    });
}

编辑：必须添加“setTimeout”，因为没有它就无法工作。看起来像是我讨厌的疯狂黑客，但不幸的是别无选择。

【讨论】：

这不适用于 Angular/Material 8+ 。似乎有更多关于它在这里不起作用的讨论 - github.com/angular/components/issues/8479
是的，不适用于 v9，但 setTimeout 可以解决问题。恕我直言，Material 团队应该让它在没有各种疯狂的黑客攻击的情况下工作。

【解决方案2】：

要使用[linear]="true" 进行此操作，请使用setTimeout 函数和0 延迟：
setTimeout(() => {
  this.stepper.selectedIndex = ...;
});

参考：https://github.com/angular/components/issues/8479#issuecomment-444063732

【讨论】：

在 Angular 8.2 中对我不起作用。 this.stepper.selectedIndex = 4; console.log(this.stepper); 出品_selectedIndex: 0

【解决方案3】：

我知道这看起来很愚蠢，但你可以使用stepper.next()

 @ViewChild('stepper')  stepper: MatStepper;
 selectedStepNumber = 2;
 ....
  ngAfterViewInit() {
      setTimeout(() => {
        for (let i = 0; i < this.selectedStepNumber; i++) {
          this.stepper.next();
        }
      }, 0);
    }

【讨论】：