Угловое условие 7 * ngIf на основе активной вкладки - PullRequest
Новая
       11

Угловое условие 7 * ngIf на основе активной вкладки

0 голосов
/ 26 февраля 2019

Я пытаюсь показать или скрыть кнопку в зависимости от того, какая вкладка активна в данный момент.Он работает после нажатия на разные вкладки, но при загрузке не отображает кнопку или содержимое вкладки по умолчанию.

Я использую панель инструментов mat и вкладки mat.Порядок вкладок: 

(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; 
       } 
     }

1 Ответ

0 голосов
/ 26 февраля 2019

Из комментариев: Спасибо, я забыл об этом.Мне удалось это исправить!Это была глупая ошибка, и я довольно устал, хе-хе.Исправление, если кому-то интересно, состояло в том, чтобы установить значения переменных в ngInit.Также используйте переменную для selectedIndex

...