从 Angular 5.X 开始,我有一个带有表单向导(mat-tab-group)的问题。通过单击选项卡一切正常,它在选项卡之间切换,但我不能使用“nextStep”或“previousStep”按钮在选项卡之间切换。这是我的代码:
组件.html
<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)" class="mat-tab-group mat-primary">
<mat-tab label="Description">
content...
<mat-card-content class="mat-card-content">
</mat-card-content>
<mat-card-footer style="margin:0 auto;">
<div fxLayout="row" fxLayoutAlign="end center">
<button mat-button type="button" (click)="cancel()" mat-raised-button color="warn">Cancel</button>
<button color="primary" mat-raised-button (click)="nextStep()" type="button">Next</button>
</div>
</mat-card-footer>
</mat-tab>
</mat-tab-group>
组件.ts
public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
this.selectedIndex = tabChangeEvent.index;
}
public nextStep() {
this.selectedIndex += 1;
}
public previousStep() {
this.selectedIndex -= 1;
}
我坚持使用 [(selectedIndex)]="selectedIndex"因为它不适用于 mat-expansion-panel ( Mat expansion panel is opened by default bug? )。所以我必须删除它,但是,如果我删除它,我的按钮“nextStep”和“previousNext”不再起作用......
我正在使用: Angular Material 5.1.1
对此有什么想法吗?
编辑:正如我所说,问题是关于 selectedIndex ......我在条件中使用 selectedIndex 来显示 mat-expansion-panel。坏主意......所以解决这个问题,我在我的组件中创建了一个 bool 值来显示或不显示垫子扩展面板。如果我在好选项卡上,我将 bool 值设置为 true 否则, bool 值为 false。希望清楚^^
最佳答案
您的解决方案的问题是 selectedIndex 应该是一个数字!您必须设置为 0 或任何其他索引:
selectedIndex: number = 0;
你在 tabChanged() 函数中用 MatTabChangeEvent 填充它。删除该函数或改用其他变量。
(尝试使用控制台日志进行调试。)
这是一个工作示例:
html:
<button (click)="previousStep()">
<mat-icon>arrow_back_ios</mat-icon>
</button>
<button (click)="nextStep()">
<mat-icon>arrow_forward_ios</mat-icon>
</button>
<mat-tab-group [selectedIndex]="selectedIndex">
<mat-tab *ngFor="let number of [0,1,2,3,4];let i=index; ">
<ng-template mat-tab-label>
</ng-template>
content{{number}}
</mat-tab>
ts:
selectedIndex: number = 0;
nextStep() {
if (this.selectedIndex != maxNumberOfTabs) {
this.selectedIndex = this.selectedIndex + 1;
}
console.log(this.selectedIndex);
}
previousStep() {
if (this.selectedIndex != 0) {
this.selectedIndex = this.selectedIndex - 1;
}
console.log(this.selectedIndex);
}
关于angular - 通过单击按钮更改选项卡 Angular Material 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48579648/