带有 selectedIndex 设置的 Angular Stepper matStepperNext/matStepperPrevious 不起作用 [英] Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working
问题描述
我使用的是 matStepper,当我将 selectedIndex 设置为 3 时,我无法使用下一个和上一个导航.我可以单击水平步进器中的 (1),然后像往常一样使用下一个/上一个.所有表格都是有效的,我可以在单击 (1) 后使用 1-7 的 next 进行导航.
Im using a matStepper and when i set the selectedIndex to 3 i cannot navigate using next and previous. i can click the (1) in the horizontal stepper and then use the next/prev as usual. All the forms are valid and i can navigate using next from 1-7 after clicking (1).
注意我有 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
推荐答案
快速破解:
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",因为没有它就不能工作了.看起来像我讨厌的疯狂黑客,但不幸的是别无选择.
had to add "setTimeout" since it's not working without it anymore. Seems like a crazy hack which I hate, but no other choice unfortunately.
这篇关于带有 selectedIndex 设置的 Angular Stepper matStepperNext/matStepperPrevious 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!