材料设计: Angular 5.步进器问题
材料设计: Angular 5.步进器问题
提问于 2018-03-23 21:45:20
我有一个Angular 5应用程序，其中我有包含4个选项卡的MatTab控件。在每个选项卡中，我都有一个MatStepper。在第一个选项卡中，行为与预期一致。在后续选项卡中，当您单击以查看该选项卡时，步进器将显示为好像所有步骤都处于活动状态，而不是仅为视图展开第一个步骤。
有没有人有过类似的行为，并可能知道是什么导致了这种情况？
回答 1
Stack Overflow用户
发布于 2018-07-18 17:44:49
这个bug正在被解决，我猜，尽管我还没有找到任何信息表明它在新版本的angular中被修复了(我还没有检查6.x )。https://github.com/angular/material2/issues/10965
问题出在渲染上。因此，如果在加载选项卡后显示stepper，则工作正常。这就是我目前的解决方案。我只需在.ts中创建selectedTab:number变量，然后这就是我的html。
<mat-tab-group (selectChange) = 'selectedTab = $event.index'>
<mat-tab label="tab 1">
Content 1
</mat-tab>
<mat-tab label="tab 2">
<div *ngIf="selectedTab==1;then step2"></div>
</mat-tab>
</mat-tab-group>
<ng-template #step2>
<mat-vertical-stepper [linear]="true" #stepper>
<mat-step>
<ng-template matStepLabel>Step 1</ng-template>
step 1
<button mat-raised-button color="primary" matStepperNext>Next</button>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 2</ng-template>
step 2
<button mat-raised-button color="primary" matStepperNext>Next</button>
<button mat-raised-button color="accent" matStepperPrevious>Back</button>
</mat-step>
<mat-step>
<ng-template matStepLabel>Step 3</ng-template>
step 3
<button mat-raised-button color="accent" matStepperPrevious>Back</button>
</mat-step>
</mat-vertical-stepper>
</ng-template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49451086
复制相关文章
相似问题
腾讯云开发者
