标签显示错误的内容

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选项卡时，渲染的网页看起来像这样：

当我点击两个标签时，它看起来像这样：

当我点击Three：

时，就像这样

我在这里做错了什么？感谢

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类。