Angular 根据变量值更改按钮样式

发布于03月22日

我有5个按钮，如下所示:

<div class="card-body pt-0">
    <button class="btn btn-secondary mr-2" (click)="opt=0">My Profile</button>
    <button class="btn btn-secondary mr-2" (click)="opt=1">Company Profile</button>
    <button class="btn btn-secondary mr-2" (click)="opt=2">Payment </button>
    <button class="btn btn-secondary mr-2" (click)="opt=3">Licenses</button>
    <button class="btn btn-secondary mr-2" (click)="opt=4">E&O Coverage</button>
</div>

单击按钮时，它会更改opt的值.

我try 了NgClass和[className]根据opt的值将按钮的类别更改为btn信息，但我无法使其在按钮单击时工作.

[ngClass]="{
  'btn-info': opt==1
}"

谢谢

推荐答案

试试这个

<div class="card-body pt-0">
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==0" (click)="opt=0">My Profile</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==1" (click)="opt=1">Company Profile</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==2" (click)="opt=2">Payment </button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==3" (click)="opt=3">Licenses</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==4" (click)="opt=4">E&O Coverage</button>
</div>