Question

我试图显示或隐藏一个按钮，具体取决于当前处于活动状态的选项卡。单击不同的选项卡后即可使用，但是在加载时不会显示按钮或默认选项卡的内容。

我正在使用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; 
       } 
     }

Answer 1

来自评论：谢谢，我忘了那个。我设法解决了！这是一个愚蠢的错误，我很累了。如果有人想知道，解决方法是为ngInit中的变量设置值。也为“ selectedIndex”使用一个变量

Angular 7 * ng如果条件基于活动选项卡

1 个答案: