Блог

[class.active-tab]="activeTab === 1" и [ngClass]="{'active-tab': activeTab === 1 }" не добавляйте класс в зависимости от моего выражения, когда я переключаю activeTab переменную.
Я инициализировал переменную activeTab ngOninit , и все в порядке, у меня tab-item есть класс active-tab , когда ngOnint он работает.
Но когда я пытаюсь изменить activeTab свою toggleTab() функцию, ngClass и [class.active-tab] не работают.

main-page.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
  }
  

main-page.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>
  

Событие, если я изменю функцию toggleTab() , чтобы возвращать только activeTab = 2 мой tab-item , в любом случае пропустит класс
Что не так?

попробуйте эту логику, возможно, она будет полезна для всех

.ts

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

.html

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

.scss

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

вы можете использовать эту логику для параметра 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>
  

Пожалуйста, проверьте обновленный ответ