Angular 角度不根据变量更改类别

[class.active tab]=“activeTab==1”

和

[ngClass]=“{'active-tab'：activeTab==1}”

切换

activeTab

变量时，根据我的表达式，不要追加类。
我已经在

ngOninit

上初始化了变量

activeTab

，这是正常的，当

ngOnint

工作时，我的

tab项具有class
activeTab
。

但是当我尝试在我的
toggleTab（）
函数中更改
activeTab
时，
ngClass
和
[class.active tab]
不起作用

主页面.component.ts

ngOnInit(): void {
    this.activeTab = 1; // works perfect
  }
 toggleTabs(id) {
    this.activeTab = id + 1;
    console.log(this.activeTab) // gives 1,2,3 depending on clicked tab
  }

public tabs = {
list: [
  {
    tab: 'all',
    label: 'All'
  },
  {
    tab: 'home',
    label: 'Home Page'
  }
 ],
activeTab: 'all',
}

ngOnInit() {
   this.changeTab('all');
}

changeTab(tab: string) {
    this.tabs.activeTab = tab;
}

.tab {
        cursor: pointer;
        padding: 15px 20px;
        font-weight: 400;
        color: #b7b7b7;
        &.active {
            border-bottom: 1px solid $brand-color;
            margin-bottom: -1px;
            color: $brand-color;
        }
}

主页面.component.html

 <div class="tabs">
   <div *ngFor="let tab of tabs; let i = index" (click)="toggleTabs(i)" // here I change tab
      [ngClass]="[tab.isActive ? 'active' : '' , tab.type ? tab.type : '']" class="tab">
                        {{tab.title}}
   </div>
 </div>
 <div class="tab-content">
    <div [class.active-tab]="activeTab === 1" class="tab-item green">TAB CONTENT 1</div>
    <div [class.active-tab]="activeTab === 2" class="tab-item green">TAB CONTENT 2</div>
    <div [class.active-tab]="activeTab === 3" class="tab-item green">TAB CONTENT 3</div>
 </div>

<div class="tabs">
        <div class="tab" *ngFor="let tab of tabs.list; let i = index" (click)="changeTab(tab.tab)"
            [ngClass]="tabs.activeTab == tab.tab? 'active' : ''"> {{tab.label}}
        </div>
 </div>
    <div>
       {{this.tabs.activeTab}}
    </div>


{{tab.title}}
选项卡内容1
选项卡内容2
选项卡内容3

如果我将函数
toggleTab（）
更改为仅返回
activeTab=2
my
tab项
则会发生此事件，但无论如何都会错过该类

怎么了？
像这样试试

<div class="tab-content">
  
<div [ngClass]="{ 'active-tab': activeTab == '1' }" class="tab">TAB CONTENT 1</div>
<div [ngClass]="{ 'active-tab': activeTab == '2' }" class="tab">TAB CONTENT 2</div>
<div [ngClass]="{ 'active-tab': activeTab == '3' }" class="tab">TAB CONTENT 3</div>

 </div>


选项卡内容1
选项卡内容2
选项卡内容3

请检查现在更新的答案
试试这个逻辑，也许它对所有人都有帮助

.ts

ngOnInit(): void {
    this.activeTab = 1; // works perfect
  }
 toggleTabs(id) {
    this.activeTab = id + 1;
    console.log(this.activeTab) // gives 1,2,3 depending on clicked tab
  }

public tabs = {
list: [
  {
    tab: 'all',
    label: 'All'
  },
  {
    tab: 'home',
    label: 'Home Page'
  }
 ],
activeTab: 'all',
}

ngOnInit() {
   this.changeTab('all');
}

changeTab(tab: string) {
    this.tabs.activeTab = tab;
}

.tab {
        cursor: pointer;
        padding: 15px 20px;
        font-weight: 400;
        color: #b7b7b7;
        &.active {
            border-bottom: 1px solid $brand-color;
            margin-bottom: -1px;
            color: $brand-color;
        }
}

.html

 <div class="tabs">
   <div *ngFor="let tab of tabs; let i = index" (click)="toggleTabs(i)" // here I change tab
      [ngClass]="[tab.isActive ? 'active' : '' , tab.type ? tab.type : '']" class="tab">
                        {{tab.title}}
   </div>
 </div>
 <div class="tab-content">
    <div [class.active-tab]="activeTab === 1" class="tab-item green">TAB CONTENT 1</div>
    <div [class.active-tab]="activeTab === 2" class="tab-item green">TAB CONTENT 2</div>
    <div [class.active-tab]="activeTab === 3" class="tab-item green">TAB CONTENT 3</div>
 </div>

<div class="tabs">
        <div class="tab" *ngFor="let tab of tabs.list; let i = index" (click)="changeTab(tab.tab)"
            [ngClass]="tabs.activeTab == tab.tab? 'active' : ''"> {{tab.label}}
        </div>
 </div>
    <div>
       {{this.tabs.activeTab}}
    </div>

您可以将此逻辑用于选项卡选项