通过单击按钮角材料5更改选项卡

我有一个问题,因为Angular 5.X带有一个表单向导(mat-tab-group) . 通过使用选项卡上的点击一切都很好,它在标签之间切换,但我不能使用“nextStep”或“previousStep”按钮在标签之间切换 . 这是我的代码:

component.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>

component.ts

public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    public nextStep() {
        this.selectedIndex += 1;
    }

    public previousStep() {
        this.selectedIndex -= 1;
    }

我'm stuck with [(selectedIndex)]= 1309736 because it doesn'使用mat-expansion-panel(Mat expansion panel is opened by default bug?) . 所以我必须删除它,但是,如果我删除它我的按钮"nextStep"和"previousNext"不再工作...

我正在使用:角度材料5.1.1

对此有何想法?

编辑:正如我所说,问题是关于selectedIndex ...我在条件中使用selectedIndex来显示mat-expansion-panel . 不好主意......所以解决问题,我在我的组件中创建了一个布尔值来显示或不显示mat-expansion-panel . 如果我在好选项卡上,我将布尔值设置为true,否则布尔值为false . 希望很明显^^

回答(0)