如何通過 [ngClass] 清除或刪除角度 6 中的類

Question

我有 2 個標簽，onclick a tab1 將顯示一個 div，再次單擊切換按鈕，div 將通過更改類展開（100% 寬度）和折疊（25% 寬度）。 再次，當我單擊 tab2，然后單擊 tab1 時，我的 div 應該始終保持折疊狀態，我的意思是它的類應該是“舊的”。這是下面的代碼。

應用程序組件.html

<span style="cursor:pointer" (click) = "tab1()">Tab1</span>&nbsp;<span (click) = "tab2()" style="cursor:pointer">Tab2</span>
<div  [ngClass]="{'old': toggle, 'new': !toggle}" *ngIf="show" class="old">
  Hello
</div>
<button (click)="change()">change</button>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toggle:boolean = true;
  show:any;
tab1(){
    alert('tab1');
    this.show = true;
}
tab2(){
    alert('tab2');
    this.show = true;
}
  change(){
    this.toggle = !this.toggle;
  }

  ngOnInit() {
this.show = false;
  }
}

應用組件.css

.old{
    width:25%;
    border:1px solid;
    height:200px;
    cursor:pointer;
    background:yellow;
}
.new{
    width:100%;
    border:1px solid;
    height:200px;
    cursor:pointer;
    background:green;
}

Answer 1

嘗試這個：

HTML

<div  [ngClass]="toggle ? 'old' : 'new'" *ngIf="show">
     Hello
</div>

刪除了class="old" 。 請立即檢查。

堆疊閃電戰演示