Angular按钮切换后btn类消失问题求助

问题出在你把基础类btn和状态类（btn-success/btn-danger）放在同一个[ngClass]的键里了。Angular的[ngClass]会根据条件添加/移除整个键对应的类集合，当切换状态时，前一组的类会被完全移除，导致btn类跟着消失。

正确的做法是把始终需要的btn类直接写在原生class属性中，只用[ngClass]切换变化的状态类：

修改后的HTML模板：

<button type="button"
  class="btn"
  (click)="onClick($event)"
  [ngClass]="{'btn-success': showPass, 'btn-danger': !showPass }">{{status}}
</button>

<p [hidden]="showPass"  >Secret password</p>

TS逻辑代码无需修改：

onClick(event: Event) {
  this.showPass = !this.showPass;
  this.status = this.showPass ? "Show me!" : "Hide me!";
  console.log(this.showPass);
}

这样处理后，btn类会一直保留在按钮上，[ngClass]只负责根据showPass的值切换btn-success或btn-danger，完美匹配Bootstrap按钮的样式需求。

内容的提问来源于stack exchange，提问作者Marek Stala