如何动态更改 class 中的样式以在 Angular 6 中使用？

Question

目前，我已经可以使用 ng-container 更改按钮的设计。该代码的片段如下。

  <ng-container *ngIf="isDisabled;">
        <button class="bot-btn-disabled"
                (click)="confirm()"
                [disabled]=this.isDisabled >
          Confirm
        </button>
  </ng-container>

  <ng-container *ngIf="!isDisabled;">
    <button class="bot-btn"
            (click)="confirm()"
            [disabled]=this.isDisabled >
      Confirm
    </button>
  </ng-container>

但是，这似乎很期待，因为我只需要更改按钮的 class="bot-btn"，如果 isDisabled = false，它将更改为 bot- 的样式btn 反之亦然。有没有办法用更短的方式做到这一点？

Answer 1

您可以根据这样的条件在您的按钮上设置 class：

[ngClass]="this.isDisabled ? 'bot-btn-disabled' : 'bot-btn'"

Answer 2

ngClass 指令可以接受一个对象，其中键是 CSS 类，当值中给定的表达式的计算结果为真值时添加，否则它们将被删除。

  <button 
        [ngClass]="{'bot-btn-disabled': this.isDisabled ,'bot-btn' : !this.isDisabled " } 
        (click)="confirm()"
        [disabled]=this.isDisabled >
              Confirm
   </button>

ngClass 接受的其他值是 string 或 array 检查 documentation page

中的演示

如何动态更改 class 中的样式以在 Angular 6 中使用？

How to dynamically change the styles in the class to be used in Angular 6?

button

angular

angular6