我正在尝试根据当前处于活动状态的选项卡显示或隐藏按钮。单击不同的选项卡后它可以工作，但在加载时它不会显示按钮或默认选项卡的内容。
我正在使用 mat-toolbar 和 mat-tabs。选项卡的顺序是：
(button) | Editor | Graph | something | somethin 2 | (button)
这里(button)将是基于活动选项卡的条件。
tabs.component.html:
<mat-toolbar color="primary" class="example-toolbar">
<button *ngIf="editContent" mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
<h1 class="example-app-name">Responsive App</h1>
<mat-tab-group animationDuration="0ms" class="tabs" (selectedTabChange)="showContent($event)" [selectedIndex]="0">
<mat-tab label="Editor" ></mat-tab>
<mat-tab label="Something"></mat-tab>
<mat-tab label="Graph" ></mat-tab>
<mat-tab label="Something" ></mat-tab>
</mat-tab-group>
<span class="example-spacer"></span>
<button mat-icon-button (click)="srnav.toggle()" class="rightBtn"><mat-icon>menu</mat-icon></button>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container">
<mat-sidenav #snav [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<!-- Show content -->
<app-content *ngIf="this.editContent"></app-content>
<app-graph *ngIf="this.graphContent"></app-graph>
</mat-sidenav-content>
</mat-sidenav-container>
tabs.component.ts：
//declaring variables
editContent:boolean = false;
graphContent:boolean = false;
......
showContent(indicator):void{
this.graphContent = false;
this.editContent = false;
switch(indicator.index) {
case 0: {
this.editContent = true;
break;
}
case 1:{
break;
}
case 2: {
this.graphContent = true;
break;
}
case 3:{
break;
}
default: {
console.log(indicator.index);
break;
}
}