Javascript 如何清除或删除angular 6至[ngClass]中的类

我有两个选项卡，单击选项卡1将显示一个div，再次单击切换按钮，div将通过更改类展开（100%宽度）和折叠（25%宽度）。再次单击tab2，然后单击tab1，我的div应该始终保持collapse，我的意思是它的类应该是'old'。下面是代码

app.component.html app.component.css 试试这个：

HTML

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

你好

删除了

class=“old”

。请现在检查

---

在这种情况下，您可能不需要class=“old”它不起作用，如果再次单击tab1，我的意思是在单击tab2后，我的扩展div应更改为原始位置，我的意思是“old”类。@UIAPPDEVELOPER请检查答案中添加的stackblitz演示。与前面的问题相同。假设我在点击“更改”按钮时展开div，然后如果我转到tab2，再次单击tab1，div仍然展开，它实际上应该将类更改为“old”，您是否查看了stackblitz演示？这就是我的理解，因为div必须从25%切换到100%，反之则是基于按钮点击

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

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

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