Вкладки с неверным содержанием

Question

У меня проблемы с работой вкладок.

Вот мой HTML:

<div class="secondary-tabs">
    <ul class="tabs">
        <li id="tab-one" (click)="selectTab('one')" [class.active]="selectedTab == 'one'">
            <a>
                <div class="tab__heading" title="One">One</div>
            </a>
        </li>
        <li id="tab-two" (click)="selectTab('two')" [class.active]="selectedTab == 'two'">
            <a>
                <div class="tab__heading" title="Two">Two</div>
            </a>
        </li>
        <li id="tab-three" (click)="selectTab('three')" [class.active]="selectedTab == 'three'">
            <a>
                <div class="tab__heading" title="Three">Three</div>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-one-content" [class.tab-pane.active]="selectedTab == 'one'">first tab </div>
        <div id="tab-two-content" [class.tab-pane.active]="selectedTab=='two'">second tab </div>
        <div id="tab-three-content" [class.tab-pane.active]="selectedTab=='three'">thrid tab </div>
    </div>
</div>

Вот мой код компонента:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})
export class FooComponent implements OnInit {

  selectedTab: string;

  constructor() { }
  selectTab(tab:string) {
    this.selectedTab = tab;
    console.log( 'selectedTab is now ' + this.selectedTab);
  }
  ngOnInit() {
    this.selectedTab = 'one';
  }

}

Проблема в том, что отображаемая веб-страница выглядит так, когда я нажимаю на вкладку One:

И это выглядит так, когда я нажимаю на вкладку Два:

И вот так, когда я нажимаю на Три:

Что я здесь не так делаю? Спасибо

Answer 1

Это может быть проблемой с вашим CSS. Может быть, есть display:none, который применяется в active? Как выглядит твой css?

Я бы изменил [class.tab-pane.active] на *ngIf, например <div id="tab-one-content" *ngIf="selectedTab === 'one'">first tab </div>

Редактировать: Также [class.tab-pane.active] выглядит не очень красиво. Я бы предложил переместить панель вкладок за пределы угловой привязки, например, <div id="tab-one-content tab-pane" [class.active]="selectedTab == 'one'">first tab </div>, потому что вы хотите переключать только класс active.