带有 selectedIndex 设置 matStepperNext/matStepperPrevious 的角步进器不起作用
Posted
技术标签:
【中文标题】带有 selectedIndex 设置 matStepperNext/matStepperPrevious 的角步进器不起作用【英文标题】:Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working 【发布时间】: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://***.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 下一个按钮不起作用 【参考方案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);
【讨论】:
以上是关于带有 selectedIndex 设置 matStepperNext/matStepperPrevious 的角步进器不起作用的主要内容,如果未能解决你的问题,请参考以下文章
从 Child UserControl 更改 MainWindow 中 TabControl 的 SelectedIndex
DataGridViewComboBoxCell 的 SelectedIndex? VB.NET
selectedIndex UItabBarController 不工作