Angular 2向HTML标签添加条件类的方法答案

【问题标题】：Angular 2 way of adding conditional classes to HTML tagsAngular 2向HTML标签添加条件类的方法
【发布时间】：2017-08-13 19:26:45
【问题描述】：

我有这个按钮：

<button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button>

我想添加一个“禁用”类，它只在某个条件为真时应用，在它为假时不应用。

Angular 2 的方法是什么？我使用 *ngIf 提出了这种方法，但它的代码量很大：

<div *ngIf="item.productId && item.supplier">
    <button class="btn btn-primary btn-sm" (click)="addSupplier(item)">Save</button>
</div>
<div *ngIf="!item.productId || !item.supplier">
    <button class="btn btn-primary btn-sm disabled" (click)="addSupplier(item)">Save</button>
</div>

【问题讨论】：

Assign classes conditionally in Angular2的可能重复
这里提供的答案与链接中的答案不同，我更喜欢它。但问题是重复的。
我同意正确标记为重复。但是，如果答案不同或更好，为什么它们无关紧要？
再一次，没有任何论据表明这个问题是重复的并且已经被正确地标记为这样。但用户能否继续回答这个问题？正如我们所看到的，@Robin 在这里提供的答案比副本中的答案更好。这实际上表明，提出重复的问题对每个人来说都是一件好事。

标签： angular

【解决方案1】：

如果您只是想禁用按钮，您可能不需要 css 类，请绑定到 [disabled]，如 [disabled]="disableButton"

【讨论】：

【解决方案2】：

Angular 2 中仍然可以使用旧的 ngClass。如果您愿意，可以尝试一下。

[ngClass]="{'my-class': isClassVisible }"

【讨论】：

【解决方案3】：

<button class="btn btn-primary btn-sm" [class.disabled]="!item.productId || !item.supplier" (click)="addSupplier(item)">Save</button>

【讨论】：