如何在数据绑定中使用ngClass？

Question

我需要使用Angular的ngClass指令来使用Bootstrap类，但是当我打算在stock.in_stock小于{{1 1}}标记不正确，但是如果我使用stock.minimum_stock并将其与固定值进行比较，就没有问题。

我要标记或显示给用户的产品等于或低于该产品声明的最低库存。

图像

代码

ngClass

您可以在图像中看到，该类标记了一种错误的方式。因为，第二项（42）不小于（5）。

谢谢！

Answer 1

我猜stock.in_stock和stock.minimum_stock是字符串而不是数字，这意味着它在做"42" <= "5"，这是真的。

尝试将它们解析为数字，看看是否可行。

[ngClass]="{ 'bg-warning': +stock.in_stock <= +stock.minimum_stock }"

或

[class.bg-warning]="+stock.in_stock <= +stock.minimum_stock"

Answer 2

这是我通常绑定到class属性的方式

[class.bg-warning]="!!(stock.in_stock <= stock.minimum_stock)"

IMO，这是将类应用于元素的更简洁的方法。 使用!!将使表达式的值为true或false，并且bg-warning仅在表达式的值为true时才适用。

Answer 3

您可以改用此方法

[class.bg-warning]="stock.in_stock <= stock.minimum_stock"